Get a Quote

取得報價

Web Insights.

Next.js + WordPress – Part 1

2022/07/19

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很棒的地方:

Next.js有非常清楚詳細的教學文件

1. Pre-rendering

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

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

利用getStaticProps來抓取資料範例

2. Incremental Static Regeneration

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

3. API Routes

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

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

API Handler

4. CDN

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

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

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

文章最後更新於 : 2022/07/20