根据用户登录情况，有条件地使用next.js应用程序或创建具有相同网站域的react应用程序

Question

我有一个网站，我已经建立了与CRA，node.js和我想使用ISR的大多数网页。问题是，大约20%的用户是注册用户，他们得到自己的内容，和不同的标题，这意味着我只能使用SSR，而不是ISR。

我的想法是用这样的方法：

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

我考虑过的另一个选项是对请求使用带有筛选器的代理服务器，以检查会话ID或cookie ID是否已设置。

有可能吗？哪种选择更好？

我是否可以使用CDN来服务那些静态文件？

有什么更好的办法来解决这个问题吗？

Answer 1

我没有使用next.js，而是为我的网站创建了自己的ISR。这样，我可以使用SSR对注册用户和ISR的未注册用户。虽然CRA应用程序中不推荐使用SSR，但是我发现在这篇文章的帮助下，使用SSR很简单，用react路由器的这篇文章很简单。我使用了反应性18和反应路由器5。

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

解决方案的优点：

1. 更多的自由与密码。例如，我可以为移动和桌面服务不同的页面(并且仍然为静态页面服务)。
2. 与next.js相比成本降低

解决方案的缺点

1. 不稳定，因为不推荐
2. 忽略了一些next.js特性，比如图像优化
3. html页面不是从CDN (我使用EBS)提供的。

Answer 2

只需将所有内容保存在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行为。