根据用户登录有条件地使用next.js app或创建同网站域的react app

Question

我有一个使用 CRA 构建的网站，node.js 我想对大部分页面使用 ISR。问题是大约20%的用户是注册用户，他们得到自己的内容，而且不同header，这意味着我只能使用SSR，而不能使用ISR。

我的想法是使用类似的东西：

在我的 node.js 服务器中，我会检查用户是否已登录
如果他没有登录，我会向 next.js 服务器发送一个获取请求，获取静态 html 文件并提供它。
如果用户已登录，我会向他发送我的 CRA 应用程序。

我想到的另一个选择是对请求使用 proxy server 过滤器，检查是否设置了 session ID 或 cookie ID

可能吗？哪个选项更好？

我可以使用 CDN 来提供这些静态文件吗？

有没有更好的办法解决这个问题？

Answer 1

只保留 Nextjs 应用程序中的所有内容。

如果您需要静态生成的页面，请在该页面中使用 getStaticProps 和 getStaticPaths 或什么都不用（以获得与 CRA 应用程序相同的结果）。

如果您需要一些与服务器相关的逻辑，请在该页面中使用 getServerSideProps。

更新运行next build

之后

页面test是一个简单的组件

const Test = () => <div>test</div>;

export default Test;

在其他页面(/gpp,/gpp/[id])中定义了getServerSideProps

.....
const GppPage: NextPage = () => (
  <>
    <Head>
      <title>GPP</title>
    </Head>
    <Box>
      
       ....
    </Box>
  </>
);


export async function getServerSideProps(context) {
  return {
    props: {
      session: "mysession"
    }
  };
}

export default GppPage;

图中的测试页显然是一个静态页面（看符号）

如果您在 _app.tsx 中定义一些 getInitialProps 或 getServerSideProps，那么您将继承 SSR 行为

Answer 2

我没有使用 next.js，而是为我的网站创建了自己的 ISR。这样我就可以对注册用户使用 SSR，对未注册用户使用 ISR。虽然 create react app 团队不推荐在 CRA 应用程序中使用 SSR，但我发现在 this article for SSR, this article 的帮助下对于带有 react router 的 SSR 非常简单。我使用了 react 18 和 react router 5.

虽然这个解决方案对我有用，但不能保证它以后会用，所以我不会推荐它，直到 create react app 团队推荐它。

解决方案的优点：

代码更自由。例如，我可以为移动设备和桌面提供不同的页面（并且仍然提供静态页面）。
与 next.js

解决方案的缺点

不稳定，因为 create react 团队不推荐它
缺少某些 next.js 功能，例如图像优化
html 页面不是从 CDN 提供的（我使用 EBS）

根据用户登录有条件地使用next.js app或创建同网站域的react app

Conditionally use next.js app or create react app with the same website domain according to users login

node.js

reactjs

next.js

get

create-react-app