iT邦幫忙

ssr相關文章
共有 77 則文章
鐵人賽 Modern Web DAY 9

技術 Day 9: 在 Server 使用 Redux

這次因為要做出像在 client 一樣從 API 取得資料,所以上次的 store 不能直接使用,要準備一個新的,不過 Entity Adapter 的部份是可...

鐵人賽 Modern Web DAY 8

技術 Day 8: Redux 與準備資料來源的 API

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 7

技術 Day 7: 在 Server 使用 React Router

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 6

技術 Day 6: 介紹 React Router 與實作文章頁面

如果你有寫過 React ,那你很可能會知道 React Router ,它幾乎可說是用 React 寫 SPA 必備的一個函式庫,雖然現在其實還有另一個 @r...

鐵人賽 Modern Web DAY 5

技術 Day 5: 實作第一個頁面

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 4

技術 Day 4: 介紹 Server Side Render

React 的 server side renderer 是在 react-dom 這個套件的 react-dom/server 下,API 就只包含 4 個函...

鐵人賽 Modern Web DAY 3

技術 Day 3: React 介紹與建構環境

這篇與之後的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-gene...

鐵人賽 Modern Web DAY 2

技術 反樸歸真的前端

會取這樣的標題是因為我覺得,原本的網頁只是純粹展示內容的 html ,到後來動態網頁的出現,管理大量的內容可以不用再一個個的檔案維護,而可以交給資料庫與樣版引擎...

鐵人賽 Modern Web DAY 1

技術 Day 1: 前言

不知各位有沒有聽過 JAMStack ? JAMStack 就是 JavaScript, API, Markup 合在一起的一種稱呼,是一種新的(?)或說是幫已...

技術 [破] 第三堂課:程式設計模式討論與思辯

今日的課程是由我們課程助教Tyson來主講。 重點針對於前端的架構設計解析。 首先,我們要問怎麼樣才是一個好的程式架構? 很多從junior工程師要進階到s...

鐵人賽 Modern Web DAY 18

技術 18. [FE] 為什麼網站要做成 SPA?SSR 的優點是什麼?

稍有經驗的開發者,可能對最近 SPA,SSR 等術語不太陌生,大概也能知道 SPA 指的是單頁式應用(Single Page Application)、SSR...

鐵人賽 Modern Web

技術 32. Nuxt 整合 API 服務

這篇介紹 API 服務整合 若頁面內容不全靠 SSR 產生,部分頁面資料得透過瀏覽器向第三方、自架 API 後端抓取,會碰到跨域 + CORS 問題。 為什麼需...

鐵人賽 Modern Web

技術 31. Nuxt 部署 - 反向代理

Nuxt 以 Universal 模式運行下,後端會起 Node Server (預設是 http://127.0.0.1:3000 ) 網站服務一般都走 8...

鐵人賽 Modern Web DAY 30

技術 30. 總結,路還長著

第 30 天,聊一下開始玩 Nuxt 的緣由(本來想寫整合 API 服務,發現內容前面沒提觀念太多,有點跳) 一開始嘗試處理 SEO 混著後端框架寫 Vue (...

鐵人賽 Modern Web DAY 29

技術 29. Nuxt Universal App 部署至 Heroku

前一篇介紹靜態頁部署,若換成 Universal Mode 呢? 「需要個 Node Server,不時讓人戳」 當工程師懶得管機器 (或你分身乏術),想把環境...

鐵人賽 Modern Web DAY 28

技術 28. Nuxt 靜態頁部署

這篇介紹靜態頁面部署方式讀者可用電商登入頁案例試試 Nuxt 命令介紹過運行模式差異,透過命令 $ yarn generate /* npm run gene...

鐵人賽 Modern Web DAY 27

技術 27. @nuxtjs/axios 如何透過 module 包裝 axios

Nuxt Axios 模組 - @nuxtjs/axios ,是官方推薦使用的 HTTP Client Module主要功能及組成有 axios 提供 HT...

鐵人賽 Modern Web DAY 26

技術 26. Nuxt Module,Nuxt 的擴充元件

Nuxt 不像 Angular 這種大型框架,功能包山包海,核心功能不夠得自行擴充。雖然提過如何透過全域/頁面設定客製、用 Plugin 收納初始化片段,但對於...

鐵人賽 Modern Web DAY 25

技術 25. Nuxt Plugin 如何讓 Axios 更好用 (下)

上一篇解釋 Nuxt 插件 (Plugins)用於管理特定執行環境的程式碼片段,並在 Nuxt App 自動載入、執行 Plugin 使用 一貫簡單風格,需要載...

鐵人賽 Modern Web DAY 24

技術 24. Nuxt Plugin 如何讓 Axios 更好用 (上)

複習一下 asyncData 動態產生頁面,作業得透過 axios 拉 product api,藉此產生商品頁面的情境 安裝 Axios $ yarn add...

鐵人賽 Modern Web DAY 23

技術 23. Nuxt 細說`<nuxt-child>` 和 `<nuxt>`

這篇打算為 Nuxt 內建元件收尾,介紹最後兩種 &lt;nuxt-child&gt; &lt;nuxt&gt; 回顧上一章,巢狀路由讓 slug...

鐵人賽 Modern Web DAY 22

技術 22. Nuxt Routing 進階 - 巢狀路由/嵌套路由 (Nested Routes)

Nuxt 路由入門 篇介紹過兩層動態路由 pages/ --| _slug/ -----| comments.vue -----| index.vue --|...

鐵人賽 Modern Web DAY 21

技術 21. Nuxt 處理首屏 - `<no-ssr>`

偶而還是會碰到某些區塊不想預先渲染,把某一區塊渲染的負荷分到 Browser,跟SPA一樣做CSR 今天主題寫另一個內建元件 - &lt;no-ssr&gt;...

鐵人賽 Modern Web DAY 20

技術 20. Nuxt `<nuxt-link>` 有什麼特別

根據 文件 所寫 就目前而言 &lt;nuxt-link&gt; 和 &lt;router-link&gt; 一樣 點擊功能太常用,身為工程師還是看個仔細實...

鐵人賽 Modern Web DAY 19

技術 19. Nuxt Middleware,請求與回應間的中盤商

本篇要回溯「Nuxt 請求處理流程」,介紹 validate() 前一步驟 - Middleware Middleware 中文翻譯為 中介軟體、中間件、中介...

鐵人賽 Modern Web DAY 18

技術 18. Nuxt 運行模式 (Mode) 差在哪?

這篇打算介紹 Nuxt 可運行模式與解決情境其中兩種靠調整設定,決定是否需要 Node Server Universal SPA 以及單純靜態頁 靜態頁產...

鐵人賽 Modern Web DAY 17

技術 17. Nuxt 靜態資源 (Assets) 管理和引用

昨天有人問我引用圖片的路徑問題,答案整理成一篇補充雖說是圖片(image)、檔案(file)、樣式(css/scss/sass)、js等靜態資源,Nuxt 依其...

鐵人賽 Modern Web DAY 16

技術 16. Nuxt 全域設定檔 (nuxt.config.js),可以吃嗎?

前幾篇提過頁面細部設定,對某一頁調 &lt;head&gt;、改 transition等細部調整。 有些調整,突然 PM 希望套用到整個網站,該怎麼辦?而前文介...

鐵人賽 Modern Web DAY 15

技術 15. Nuxt 透過 fetch 動態產生內容,並在 Client 使用

這篇主題講「Nuxt 如何用 fetch 動態產生頁面內容」 用來補充頁面細部設定 複習一下 Nuxt 收到請求後的處理流程 asyncData 和 fetc...

鐵人賽 Modern Web DAY 14

技術 14. Nuxt 透過 asyncData 動態產生頁面內容

這篇主題講「Nuxt 如何用 asyncData 動態產生頁面內容」 用來補充頁面細部設定 asyncData 在執行順序中,排在頁面渲染(render)前,回...