iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0
自我挑戰組

30 天練成全端 Remix 大師系列 第 1

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

  • 分享至 

  • xImage
  •  

嗨點進來的你,我是 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。

30 天大綱:

工具入門 days

  1. 專案簡介 & 規劃
  2. TypeScript React
  3. Remix 架構
  4. Remix loader
  5. Remix action
  6. Tailwind & shadcn
  7. Prisma
  8. MongoDB
  9. Cloudflare
  10. Firebase
  11. Storages
  12. Auth

Remix 製作 days

13-15. Cookies and Sessions and Auth
16. DB Calling
17. Route Rendering
18. 金流
19. 金流
20. 物流
21. Styling
22-23. WYSIWYG
24-25. Email Sending

Deploy days

  1. CI/CD
  2. Cloudflare
  3. Vercel
  4. DNS
  5. Finish!

一些有用的連結:
Remix
Remix YT
這次的 Github


下一篇
[D2] TypeScript + Vite(React) + Remix = ❤️
系列文
30 天練成全端 Remix 大師6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
nlstudio
iT邦新手 2 級 ‧ 2024-08-28 06:59:45

網站速度對於今天的 SEO 影響非常小

Yin iT邦新手 5 級 ‧ 2024-08-28 08:28:17 檢舉

嗨,我查了許多文章,目前網路速度算是最基礎的 SEO factor 哦!
當然從開始納入 SEO 到現在又新增了很多很多不同面向的參數,但是網頁速度是最基本的~

我要留言

立即登入留言