@ssr

Stories List
@esunr

解決基於 Webpack 構建的 Vue 服務端渲染項目首屏渲染樣式閃爍的問題

前言 當我們使用 Webpack 搭建一個基於 Vue 的服務端渲染項目時,通常會遇到一個很麻煩的問題,即我們無法提前獲取到當前頁面所需的資源,從而不能提前加載當前頁面所需的 CSS,導致客户端在獲取到服務端渲染的 HTML 時,得到的只有 HTML 文本而沒有 CSS 樣式,之後需要等待一會兒才能將 CSS 加載出來,也就是會遇到『樣式閃爍』這樣的問題。 如果你想要完整 SSR 實踐,可以參考:

esunr Avatar

@esunr

Nickname EsunR

@zxbing0066

React SSR - 寫個 Demo 一學就會

今天寫個小 Demo 來從頭實現一下 react 的 SSR,幫助理解 SSR 是如何實現的,有什麼細節。 什麼是 SSR SSR 即 Server Side Rendering 服務端渲染,是指將網頁內容在服務器端中生成併發送到瀏覽器的技術。相比於客户端渲染(CSR),SSR 一般用於以下場景: SEO (搜索引擎優化):由於部分搜索引擎對 CSR 內容支持不佳,所以 SSR 可以提升網站在

zxbing0066 Avatar

@zxbing0066

Nickname 嘿嘿不務正業

@coder_64d08a0a77d68

我第一個快200 Star 的項目,Taro H5 SSR 插件現在咋樣了

引言 我寫下這篇文章的初衷是,我認識到,編寫代碼的同時,我們也需要去分享我們的工作和成果,讓更多的人瞭解我們所做的事。這篇文章旨在記錄我的第一個近200 Star 的項目 tarojs-plugin-ssr,能讓更多的人去知道這個項目,瞭解到這個項目還被持續維護中。 我將在文章中講講這個項目的起源,回顧我與 Taro 項目的故事。同時,根據我有限的經驗,來回答一些朋友們關於如何參與開源項目的疑問。

coder_64d08a0a77d68 Avatar

@coder_64d08a0a77d68

Nickname Coder

@wentaohu12138

服務端渲染SSR

1.項目背景 需要將一箇舊的用vue+svg搭建的地鐵圖h5改造成有個ssr項目,以提升首屏渲染時間。 2.分析 項目現狀,項目組已有koa搭建的業務中間層,且需要改造的項目為一箇舊項目,綜合考慮,將舊項目進行改造,而非使用nuxt重寫。 3.SSR原理 1.所謂SSR就是將一個項目通過兩種打包配置,分別生成兩份打包代碼,一份在服務端(nodejs)執行,另一份在客户端(browser)上執行。當

wentaohu12138 Avatar

@wentaohu12138

Nickname 牛刀殺雞

@kanshouji

服務端渲染nextjs項目接入經驗總結

服務端渲染 nextjs@14 項目接入經驗總結,本文重點介紹基本知識點/常用的知識點/關鍵知識點 背景 為提高首屏渲染速度減少白屏時間提高用户體驗及豐富技術面,開始調研和接入nextjs框架 優勢 nextjs是一套成熟的同構框架(一套代碼能運行在服務端也能運行在瀏覽器)對比傳統的客户端渲染的核心優勢是首屏是帶數據的和減少跨域帶來的option請求。其它後續操作是一樣的。理論上能比客户端渲染看到

kanshouji Avatar

@kanshouji

Nickname 路邊縣

@zzd41

Next.js 超實用進階技巧【持續更新】

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊Next.js 進階技巧,如果大家遇到任何問題,歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能,乾貨滿滿,建議點贊➕關注➕收藏;後續還會 持續更新更多技巧和案例 温馨提示:如果你還是個 Next.js 新手,建議先閲讀這篇 Next.js 最佳實踐,照着這篇文章先把代碼敲一遍 Next.js 是一個強

zzd41 Avatar

@zzd41

Nickname superZidan

@zzd41

深入探索 Next.js 中的流式渲染和分塊傳輸編碼

hello 大家好,我是 superZidan,這篇文章想跟大家聊聊 Next.js 中的流式渲染和分塊傳輸機制 ,如果大家遇到任何問題,歡迎 聯繫我或者直接微信添加superZidan41 🔥🔥🔥前方高能,乾貨滿滿,建議點贊➕關注➕收藏; 温馨提示:如果你還是個 Next.js 新手,建議先閲讀這篇 Next.js 最佳實踐,照着這篇文章先把代碼敲一遍 簡述 在本篇文章中,我們將深入探索組

zzd41 Avatar

@zzd41

Nickname superZidan

@meathill

SSR,雲平台,ChatGPT——我的 2023 技術關鍵詞

前言 2023 年,因為換工作,啓動新項目等原因,我對我的技術棧進行了比較大的更新,主要集中在這三個方向: SSR(Server Side Rendering,服務器端渲染)。之前我開發的項目基本上都是 SPA(Single Page Application),比如 Vue,但之後我會越來越多開始用 Nuxt。由於基礎設施的發展,以後 SSR 會更方便更好用。 雲平台。以前我大概買了 3、4

meathill Avatar

@meathill

Nickname Meathill

@gomi

Astro + NextUI 搭建個人博客(導航組件篇)

Astro 簡介 由於我之前的個人博客是Vue3+Quasar+Koa+MySql搭建的,整體就是SPA的思路,作為練手倒是可以鍛鍊前後端各方面的能力。但考慮到後期的遷移和更新等,實在過於麻煩,個人博客其實使用SSR或SSG之類的框架就行了,比如Nextjs,Nuxtjs,Remix等等。於是我接觸到了Astro這個框架,它厲害的是不與任何前端框架進行強行綁定,比如Nextjs是與React強綁定

gomi Avatar

@gomi

Nickname Gomi

@invalidnull

關於 serve-static 的 index.d.ts 報錯的問題分析

理解這條日誌的含義,需要我們深入分析其組成部分和背後可能的原因。這條日誌信息顯然指向了一個 Node.js 項目中的一個具體錯誤,其指出了錯誤發生的文件路徑和具體位置。接下來,我將逐步解析這條日誌信息的各個方面,並解釋可能的原因和解決方法,同時遵守你的要求,使解析過程既詳細又不顯得機械。 日誌信息解析 2024-01-01 05:08:15,120 INFO d.h.c.h.PrintOutput

invalidnull Avatar

@invalidnull

Nickname 註銷

@invalidnull

Spartacus 6.8 成功開啓 SSR 的命令行

在一個已有的 Storefront 上,使用命令行:ng add @spartacus/schematics --ssr 最後使用下列命令行,可以成功啓動(記得先 build): 在現代的前端開發過程中,Angular 端到端的解決方案已經成為了許多開發人員和團隊的首選框架之一。Angular 不僅提供了一個健壯的平台來構建複雜的客户端應用,還通過各種工具和庫,如 Angular Schem

invalidnull Avatar

@invalidnull

Nickname 註銷

@jasonma1995

一個開箱即用的已集成全部主流前端工具、類庫的nuxt3服務端渲染ssr項目

項目背景: 需實現公司國際官網項目的seo 如果是react就選用next,因為我最近在用vue3,就試試使用nuxt 在網上找了很多模版,發現都不理想,缺的東西比較多,沒法做到開箱即用,所以自己造個模版項目 採用當前最新的nuxt3實現 目錄簡介: 已集成各類主流vue3生態相關工具或庫 nuxt3 vue官方推薦的最好用,生態最全的nuxt3服務端渲染ssr框架 vue3

jasonma1995 Avatar

@jasonma1995

Nickname JasonMa

@paidaxinghaimianbaobao

Nuxt3如何部署到Netlify

部署到 Netlify 上需要和 Github 結合,以後你只需要推送代碼就會自動部署。 Nuxt3 官網描述部署到 Netlify 先看官網怎麼Nuxt3官網怎麼描述的 零配置!!! 我看了很多YouTube視頻也是説不需要配置,結果就是所以的編譯和加載都ok,首頁就是沒有。 Netlify 在頁面點擊創建 這裏有三中方式,我就是選擇的第一種。反正我看了 Nuxt 説的,都是零配

paidaxinghaimianbaobao Avatar

@paidaxinghaimianbaobao

Nickname 派大星,海綿寶寶

@elegantdevil

Nuxt3入門(上)

Nuxt.js 是一個基於 Vue.js 的通用應用框架。 通過對客户端/服務端基礎架構的抽象組織,Nuxt.js 主要關注的是應用的 UI 渲染。原文可移步我的公眾號文章 🔧 安裝問題 ⚙️ 初始化項目失敗 npx nuxi@latest init my_nuxt3_app 1.連接 raw.githubusercontent.com 失敗 “Failed to connect t

elegantdevil Avatar

@elegantdevil

Nickname Believer

@jdcdevloper

極致性能優化:前端SSR渲染利器Qwik.js | 京東雲技術團隊

引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互,而前端框架的選擇對於實現這些目標至關重要。然而,傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下,我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架,更是一種前端性能的終極解決方案。它不僅提供了卓越的性能,還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q

jdcdevloper Avatar

@jdcdevloper

Nickname 京東雲開發者