[D1] 為你的 SEO 在 30 天學 Remix SSR (React+Express) 吧！

16th鐵人賽 remix fullstack react

Yin

2024-08-27 05:01:33

333 瀏覽

分享至

嗨點進來的你，我是 Yin，歡迎來到 Remix 的世界！

Remix SSR

先打預防針，Remix 是 SSR(Server Side Render) 架構，與相近的框架 Next.JS 提供的一樣，比較不一樣的是 Remix 就是生而為 SSR，所以並沒有 'use client' 選項，如果需要用到的話，需要透過 useEffect 或是他們主要開發者 Sergiodxa remix-utils plugin，與您原本製作 HTML/CSS/JS 的架構可能不太一樣，但這個痛帶來的是超快的載入速度（ref: Remix vs Next.JS）（也可以看看我放在 Cloudflare Pages 上的 Personal Page）與更高的 SEO 排名，另外你也不需要額外獨立 api 資料夾寫後端資料，文件可以少不少！

專案介紹

這 30 天除了入門 Remix 這個全端框架外，我的主軸是製作一個電商平台，然後會有個簡易的 CMS 後台，所以會包含一些後台製作的部分。
好處就是剛剛說過的載入速度很快，使用者體驗更好！還有因為頁面被 search engine 爬取時就非常完整，SEO 排名會相較其他網站更高，自然流量也更好，啊因為是電商，所以我也會順便摸摸金物流的串接。另個好處就是你可以自己 Host，部署網站、自訂網域、自訂 Email，不需要訂閱什麼平台！如果使用 Cloudflare 的話，整包就是不需要任何費用！

目標是 30 天後把網站架在 Cloudflare Pages！

你應該要知道的工具們

TypeScript
整個 Remix 開發社群都是使用 TypeScript，如果你對 types 還不熟悉請快去複習複習！
NodeJS NPM
這個就是 Remix 後端執行的環境，不需要像 Docker 一樣什麼打包，我們只用 npm 簡簡單單輕輕鬆鬆就能在 package 管理 dependencies。
Tailwind
我的 UI 會用這個，把所有東西砸在 className 裡面的怪物，如果熟悉 Bootstrap 的話，這就是在 JSX 世界的大王。
JSX(TSX)
這個就是你可以在 JavaScript/TypeScript 文件裡面寫 <html>，非常之方便與基礎，檔案結尾會是 .tsx 或是 .jsx。
Visual Studio Code
不需要安裝什麼延伸模組，我只使用 Chinese(Tradition), Copilot, Prisma, Tailwind CSS IntelliSense, Prettier。