在2019 JavaScript大調查中,表現亮眼的後端框架Next.js推出了最新版本9.3,開始支援新的靜態網站生成功能,並且提供預覽模式,也讓用戶能夠繞過靜態生成頁面,在CMS動態顯示草稿。

官方提到,通常開發者在建置網站或是網頁應用程式的時候,必須選擇靜態網站生成(Static Site Generation,SSG)或是伺服器端渲染(Server-Side Rendering,SSR)其中一種方法,而Next.js為一種混合框架,可讓開發者在每個網頁使用最適合的技術。

Next.js 9.0加入了自動靜態最佳化方法,當頁面沒有getInitialProps等資料擷取需求時,便會在建置的時候自動渲染成HTML,但是官方提到,在許多情況下,即便需要阻擋資料擷取請求,開發者也會希望在建置時,把頁面渲染成靜態HTML,像是在無頭CSM的行銷頁面或是網站的部落格區塊。

因此官方與廣大的社群討論了限制方法,以建立新的方法來統一資料擷取和靜態網站生成。現在於Next.js 9.3中,增加了新的資料擷取方法,開發者可選擇讓頁面在建置期間擷取資料getStaticProps,以及依據每個請求擷取資料的getServerSideProps,或是透過提供參數為動態路徑產生靜態頁面getStaticPaths。

當頁面從無頭CMS中擷取資料時,靜態生成方法很好用,但是要在無頭CMS撰寫草稿,並且想要立即在頁面上預覽草稿時,就不那麼理想了,因為輸出是靜態的,預覽變更需要重新生成靜態頁面。因此現在官方在Next.js 9.3中內建了預覽模式,可以讓用戶繞過靜態生成的頁面,按需渲染CMS的草稿頁面。 


Advertisement

更多 iThome相關內容