Skip to content

LiangYingC/next-csr-ssr-ssg-simple-demo

Repository files navigation

專案描述

首次嘗試 Next.js,利用 useEffectgetServerSidePropsgetStaticProps 更具體觀察 CSRSSRSSG 在網頁上的呈現差異。

啟動專案

環境

  • Node.js 至少要 v10.13
  • 首次啟動需 npm i,安裝相關 package

指令

  • npm run dev => next dev : starts the application in development mode with hot-code reloading, error reporting, and more. The application will start at http://localhost:3000 by default.
  • npm run build => next build : creates an optimized production build of your application. The output displays information about each route.
  • npm run start => next start : starts the application in production mode. The application should be compiled with next build first. The application will start at http://localhost:3000 by default.

p.s. 如果採用 npm run dev 是無法觀察出 SSR / SSG 的差異,需要使用 npm run start 才能觀察出差異。npm run start 前,記得要先 npm run build

畫面結果

參考文件

About

Use Next.js to show the difference between CSR / SSR / SSG

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published