React + Vite + vikeでプリレンダリングを有効にする

React + Vite + vikeでプリレンダリングを有効にする

vikeをインストールします。

npm i vike

vite.config.tsを変更します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vike from 'vike/plugin'; // 追加

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    vike({ prerender: true }) // 追加
  ]
})

参考サイト

React Tour | Vike

Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.

vike.dev

prerender | Vike

Like Next.js/Nuxt but as do-one-thing-do-it-well Vite plugin.

vike.dev

Pre-rendering (SSG) | vite-plugin-ssr

vite-plugin-ssr.com

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^