下一个JS-在SSR和CSR中处理_app.JS上的getInitialProps

Question

我正在尝试创建一个Next JS应用程序，该应用程序处理getInitialProps内部的身份验证和初始路由。我发现这个方法既可以在服务器上执行，也可以在客户端上执行。到目前为止，我的方法是有两个不同的处理程序，基于检测我是否在服务器中执行，检查ctx内部是否存在req属性。这确实有好处，但感觉不是正确的做法。有人能告诉我是否有更清洁的方法吗。所有身份验证都在一个单独的子域中处理，所以如果没有cookie或身份验证请求因其他原因失败，我只需要重定向到身份验证子域。

import "../../styles/globals.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
MyApp.getInitialProps = async (appContext) => {
let cookie, user;
let ctx = appContext.ctx;
//Check if I am in the server.
if (ctx.req) {
cookie = ctx.req.headers.cookie
//Do auth request.
//Redirect base on user properties
// handle redirects using res object
ctx.res.writeHead(302, { Location: "/crear-cuenta"});

}  else {
cookie = window.document.cookie;
//Do auth request.
//Redirect base on user properties
//Do redirects using client side methods (useRouter hook, location.replace)???
}
//Return pageProps to the page with the authenticted user information.
return { pageProps: { user: user } };

};
export default MyApp;

Answer 1

我认为您的代码足够干净。当然你仍然可以维护它。

我的建议如下：

MyApp.getInitialProps = async (appContext) => {

在这一行中，您可以使用对象销毁技术来直接获取上下文：

MyApp.getInitialProps = async ({ ctx }) => {

那么你就不再需要这行了，例如：let ctx = appContext.ctx;

顺便说一句，可以清理的代码中最重要的部分是您在if/else条件下两次编写身份验证请求的区域。我建议你这样实现这个部分：

const cookie = ctx.req ? ctx.req.headers.cookie : window.document.cookie;

尽管我会尝试将getInitialProps中的所有内容都保留在服务器端，但在这种情况下，我会做一个小的更改，以获得如下cookie，并仅在服务器端处理它。

const cookie = cookie.parse(ctx.req ? ctx.req.headers.cookie || "" : undefined);

注意：我使用的是cookie解析器，您也可以自己安装该包。(npm install cookie(

如果你需要在客户端对你的cookie进行额外的检查，我会在componentdidmount中这样做，或者如果你在useEffect中使用react hook。但这并不是必须的。

现在您可以实现一次//Do auth request，这将导致更干净的代码，当然也可以减少不必要的重复。