Next.js + WordPress - Part 1

如何將React跟WordPress做結合?

只要有在關注前端或是網路科技的同伴都一定聽過React，React是由Facebook團隊開發的一個Library，React的主要優點為它運用元件化思考，讓元件有封裝並能夠重複使用的特性，程式碼也容易維護，近年來在前端開發佔有非常重要的地位。

因創團隊近幾年也開始接觸學習React，不斷的在思考如何將React與WordPress做結合，甚至是用React來開發WordPress網站（題外話，WordPress的Block Editor也是用React），如果可以用React來解決目前WordPress的痛點那就更完美了。

WordPress的痛點

1. 市占率高，開源程式碼，容易成為駭客攻擊對象

目前大家對WordPress最常出現的疑問應該是安全性了，雖然因創科技開發的網站都是客製化主題，外掛數量相對套版網站少很多(外掛數量越多安全性漏洞越多)，但是不可否認WordPress網站還是會常常成為駭客攻擊的對象。

2. 速度以及穩定性優化

大部分的WordPress網站都是用套版製作的，因此常常會需要很多外掛來達成客戶需求，外掛一多，網站需要跑比較多的程式，自然會需要比較久的時間，對網站速度會有很大影響。雖然客製化網站加上HTML的快取快掛以及CDN應用，大部分網站的速度表現都很優秀，但是如果可以把整個網站都掛在CDN上相信會有更好的效果。

React + WordPress

如何使用React來解決上面提到的痛點，而不是只是為了用React而用React，是我們不斷思考的方向，如果直接用React由前端call API來render html，那其實不能解決問題，因為API的連結還是會把後台的網址透漏出來，而且call API來render頁面只賺取到了一開始頁面載入的速度，還是需要等API回傳資料來Render網站，Client Side Rendering對SEO也可能會有負面的影響。

SSR(Server-Side Rendering)

為了解決Client-Side Rendering對SEO造成的負面影響，前端工程師開始使用Server-Side Rendering（SSR）的技術，SSR指的其實就是先將頁面在server端 render出來再送給使用者，聽起來跟原本的WordPress做法有點像，但是是用React來寫，SSR可以解決對SEO的負面影響，也可以保留React語法。

有另外一個技術叫SSG(static-site generation)，也是在Server端先將頁面產生出來，但是相對於SSR是在run time產生頁面，SSG會在build time就將頁面都先處理好，雖然會增加build time的時間跟資源，但是使用者不需要在造訪頁面的時候等伺服器產生頁面，體驗上會更加快速。

市面上其實已經有專為WordPress打造的React前端framework，像是Frontity ，不過既然要前後端分開了，我們希望找一個不限制於只能用在WordPress的solution，而且市占率要高，教學或是分享文件要齊全，重點是能夠將整個網站前端以及micro services推到Edge去，簡單的來說就是最近很流行的Jamstack，以現階段來說，Frontity應該還不完全算是Jamstack的架構（我們沒有用過Frontity所以可能會有誤解）。

Next.js

講了那麼多前言，終於來到重點，就在大家還在苦惱怎麼把React有效地應用在WordPress上的時候，澳洲前端工程師Chris分享了一個連結：https://nextjs.org/examples，Next.js提供了一個簡單的WordPress範例，利用graphql 來抓取WordPress的資料，並且用SSR/SSG的方式來Pre Render頁面。

我們先找了一個最簡單的網站，使用Next.js來開發做POC(Prove of Concept)，結果讓人十分驚訝，Next.js的架構非常清楚易懂，也提供了許多的教學文件，而且有幾個很重要的feature是可以解決上面提到的痛點，我這邊列出幾個我覺的Next.js很棒的地方：

1. Pre-rendering

Next.js提供兩種Pre-rendering的功能，一種是SSG(在build time的時候就將所有頁面都先產生出來)，另一種為SSR(在request的時候才產生HTML頁面)。

如果是為了速度跟SEO，當然是比較建議SSG，但是SSG的問題就是更新內容不易，而Next.js 12版之後的on-demand revalidate功能就非常重要。

2. Incremental Static Regeneration

會使用WordPress的客戶大部分都有經常更新網站內容的需求，所以前端能即時更新內容是非常重要的，而Next.js提供了幾種非常有用功能，讓我們可以根據自己的需求去設定如何更新前端網頁的內容。

3. API Routes

這是一個非常重要的功能，解決WordPress安全性的問題，Next.js提供讓我們可以自訂API endpoint的功能，當前端有需要跟後端聯繫的時候，不管是送資料或是拉資料，都可以經過我們自訂的API endpoint來處理，然後我們的API handler再將需求送給真正的WordPress連結，這樣做有一個非常大的好處，就是WordPress的連結是隱密的，使用者或是駭客無法由前端看到真正後台的連結。

API Route也能處理很多一些比較小的服務，例如表單的資料驗證之類的，可以減少後台的資源使用。

4. CDN

這也是一個可以解決上面提到痛點的功能，如果你用Vercel 或是Netlify 來部署Next.js專案，網站的靜態網頁將會被推上CDN的edge，簡單的來說，整個前端網站都會掛在CDN上面。理論上來說，從世界各地的Time to First Byte(TTFB)都會很快，而且穩定性會非常高，基本上網站不會有Downtime，更不用說可以承受非常巨大的流量。

你得到它了嗎？用Next.js來做WordPress的前端可以讓網站變得又快又安全!!!!

Next.js提供的功能還不止這些，有興趣的人可以到他們官網去看看，而我們正在開發第一個正式的Next.js+WordPress網站，也會在下一篇文章跟大家分享更多我們的經驗以及結果。