根據用戶登錄有條件地使用next.js app或創建同網站域的react app

Question

我有一個用 CRA 建立的網站，node.js，我想對大部分頁面使用 ISR。 問題是大約20%的用戶是注冊用戶，他們得到自己的內容，和header不同，這意味着我只能使用SSR，不能使用ISR。

我的想法是使用類似的東西：

在我的 node.js 服務器中，我會檢查用戶是否已登錄
如果他沒有登錄，我會向 next.js 服務器發送一個獲取請求，獲取 static html 文件並提供服務。
如果用戶已登錄，我會向他發送我的 CRA 應用程序。

我想到的另一個選擇是在請求上使用帶過濾器的代理服務器，檢查是否設置了 session ID 或 cookie ID

是否可以？ 哪個選項更好？

我可以使用 CDN 來提供那些 static 個文件嗎？

有沒有更好的主意來解決這個問題？

Answer 1

只需將所有內容保留在 Nextjs 應用程序中即可。

如果您需要 static 生成的頁面，請在該頁面中使用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;

在圖像中，測試頁顯然是一個 static 頁面（看符號）

如果您在_app.tsx中定義了一些getInitialProps或getServerSideProps ，那么您將繼承 SSR 行為

Answer 2

我沒有使用 next.js，而是為我的網站創建了自己的 ISR。 這樣我就可以對注冊用戶使用 SSR，對未注冊用戶使用 ISR。 雖然 create react app 團隊不推薦在 CRA 應用程序中使用 SSR，但我發現在這篇關於 SSR 的文章，這篇關於帶有 React 路由器的 SSR 的文章的幫助下，這非常簡單。 我使用了 React 18 和 React Router 5。

雖然這個解決方案對我有用，但不能保證它以后會起作用，所以我不會推薦它，直到 create react app 團隊推薦它。

該解決方案的優點：

代碼更自由。 例如，我可以為移動設備和桌面提供不同的頁面（仍然提供 static 個頁面）。
與 next.js 相比降低了成本

解決方案的缺點

不穩定，因為 create react 團隊不推薦
缺少一些 next.js 功能，例如圖像優化
html 頁面不是從 CDN 提供的（我使用EBS ）

根據用戶登錄有條件地使用next.js app或創建同網站域的react app

問題描述

2 個解決方案

解決方案1
0 2022-04-13 07:32:51

解決方案2
0 已采納 2022-05-09 11:08:25

根據用戶登錄有條件地使用next.js app或創建同網站域的react app

問題描述

2 個解決方案

解決方案1 0 2022-04-13 07:32:51

解決方案2 0 已采納 2022-05-09 11:08:25

解決方案1
0 2022-04-13 07:32:51

解決方案2
0 已采納 2022-05-09 11:08:25