My vite+vike project is not prerendering at all #1864

AoSankaku · 2024-09-09T09:12:19Z

AoSankaku
Sep 9, 2024

My vite project with vike is not prerendering at all!!! (Produces html file without prerendered).

Due to this issue, I can't investivate the expected behavior (example built file) myself.

My repository (language-rework branch)

https://github.com/AoSankaku/station_sign_generator/tree/language-rework

My goals are:

Build static head part in order to make website properly recognized by social medias such as twitter (it is MANDATORY to render the head part beforehand, other part is allowed to remain CSR)
Being capable of changing languages
Make separate directory (like mysite.com/en, mysite.com/ja), and set proper head for each language

built html file in dist/client

<!DOCTYPE html>
    <html lang="en">
      <head>
<!--links are deducted because they are too long-->
        <meta charset="UTF-8" />
        
    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    
    
    
    
  
      </head>
      <body>
        
        <div id="root"></div>
        
        <script id="vike_pageContext" type="application/json">{"_configFromHook":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/src/pages/index","routeParams":{},"data":"!undefined"}</script>
        <script src="/station_sign_generator/assets/entries/entry-client-routing.B-OXD-cn.js" type="module" async></script>
        <link rel="modulepreload" href="/station_sign_generator/assets/entries/src_pages_index.BkVZ6-6M.js" as="script" type="text/javascript">
        <link rel="modulepreload" href="/station_sign_generator/assets/chunks/chunk-DFwSl_c2.js" as="script" type="text/javascript">
      </body>
    </html>

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import ViteYaml from '@modyfi/vite-plugin-yaml'
import { VitePWA } from 'vite-plugin-pwa';
import i18next from 'i18next';
import { ManifestOptions } from 'vite-plugin-pwa';
import vike from 'vike/plugin'

const base = "/station_sign_generator/"

const generateManifest = (t: Function) => ({
  name: t('meta.pwa.name'),
  short_name: t('meta.pwa.short-name'),
  description: t('meta.description'),
  theme_color: '#ffffff',
  icons: [
    {
      src: 'android-chrome-192x192.png',
      sizes: '192x192',
      type: 'image/png',
    },
    {
      src: 'android-chrome-512x512.png',
      sizes: '512x512',
      type: 'image/png',
    },
  ],
}) as (false | Partial<ManifestOptions> | undefined);

// https://vitejs.dev/config/
export default defineConfig({
  base: base,
  plugins: [
    react(),
    ViteYaml(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: generateManifest(i18next.t),
    }),
    vike({
      prerender: {
        noExtraDir: true
      }
    })
  ],
})

+Pages.tsx

import React from 'react';
import App from '../../App.tsx'
import Temp from '../../Temp.tsx'
import { BrowserRouter } from 'react-router-dom'
import '../../index.css'
import "react-color-palette/css";
import "../../i18n/configs"
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Head from '../../Head.tsx'
import { HelmetProvider } from 'react-helmet-async'


const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

export { Page }

function Page() {
  return (
    <React.StrictMode>
      <HelmetProvider>
        <ThemeProvider theme={darkTheme}>
          <BrowserRouter basename='/station_sign_generator/'>
            <Head />
            <CssBaseline />
            <App />
          </BrowserRouter>
        </ThemeProvider>
      </HelmetProvider>
    </React.StrictMode>
  )
}

brillout · 2024-09-09T09:40:03Z

brillout
Sep 9, 2024
Maintainer

I suspect a user-land issue, but minimal reproduction welcome if you believe otherwise.

0 replies

AoSankaku · 2024-09-09T16:50:09Z

AoSankaku
Sep 9, 2024
Author

https://github.com/AoSankaku/vite-vike-i18n-test
So I forked one of the examples using i18n, and found nothing is "pre-rendered" in html files as I expected. All code is unchanged besides I had done npm i beforehand.

dist/client/index.html

<!DOCTYPE html>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="/assets/static/renderer_Layout-031b266d.Cqz1SQAi.css">
        <meta charset="UTF-8" />
      </head>
      <body>
        <div id="page-view"><div style="display:flex;max-width:900px;margin:auto"><div style="padding:20px;padding-top:42px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;line-height:1.8em"><a href="/" class="navitem">Home</a><a href="/about" class="navitem">About</a><a href="/movies" class="navitem">Movies</a></div><div style="padding:20px;padding-bottom:50px;border-left:2px solid #eee;min-height:100vh"><h1>Welcome</h1>This page is<!-- -->:<ul><li>Localized<!-- -->. <!-- -->Change language<!-- -->:<!-- --> <a href="/" style="margin-left:7px">en-US</a><a href="/de-DE/" style="margin-left:7px">de-DE</a><a href="/fr-FR/" style="margin-left:7px">fr-FR</a></li><li>Rendered to HTML</li><li>Interactive<!-- --> <button type="button">Counter<!-- --> <!-- -->0</button></li></ul></div></div></div>
        <script id="vike_pageContext" type="application/json">{"pageProps":"!undefined","locale":"en-US","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
        <script src="/assets/entries/entry-client-routing.Ckb3HvbX.js" type="module" async></script>
        <link rel="modulepreload" href="/assets/entries/pages_index.yzWykeJh.js" as="script" type="text/javascript">
        <link rel="modulepreload" href="/assets/chunks/chunk-ClEYa4BI.js" as="script" type="text/javascript">
        <link rel="modulepreload" href="/assets/chunks/chunk-Bh9oUNAu.js" as="script" type="text/javascript">
      </body>
    </html>

The indispensable part is pre-rendering head part as social medias like twitter won't recognize any html codee generated by JavaScript. I figured it out "pre-rendering" or "SSG" on vike is much different than I supposed.

Though it is a tough decision, I'll quit using vite and vike and migrate to next.js. Thank you for your quick responce anyway!

8 replies

brillout Sep 11, 2024
Maintainer

Given that a lot of users are using pre-rendering and its SEO benefits, it's most likely an issue on your side.

Note that the examples are there to showcase features but you shouldn't use them for creating new Vike apps. Use Bati instead.

The focus of Vike so far is flexibility, thus Vike's i18n API is low-level. Having also a higher level and simpler (albeit less flexible) i18n API is on the radar.

For fruitful discussions, have a look at:

AoSankaku Sep 11, 2024
Author

I've once heard Bati thing anywhere (while not knowing what bati exists for), but I overlooked that. I'm creating a new project with a support from Bati.

Don't get me wrong, I read thoroughly your documentation... and surprisingly learned nothing. It's definitely shame on me, but I always prefer learning things from example-analyzing (not only in programming languages). I'd already tried searching on github for an existing and well-working vite project with react-helmet or react-helmet-async and found nothing. I've also went through stackoverflow, and found nothinhg. Also, I'm not very used to GitHub search nor vike project looking up. Furthermore, I'm not an native English speaker and information on Vike in Japanese is really, really lilmited and here is the last resort to beg for a help (some people know vike exists, but there are surprisingly few). But very sorry for I look like behaving uglily.

May I upload a new question if the problem consists after using bati, react-helmet and react-i18next, or should I leave comment here?

brillout Sep 11, 2024
Maintainer

Yes, but please spend a substantial amount of time trying and reading docs before asking. Almost all of your questions so far were resolved by pointing you to existing documentation.

And, no worries, no offense taken.

AoSankaku Sep 11, 2024
Author

I spent around 18 hours or so on this issue (react-i18next & vike (& react-helmet?) integration with SSG)... it seems not enough, I'll try harder.

However, do you have time to provide why I'm getting the same html file in dist/client on Vike docs? I slowly followed the docs ( https://vike.dev/pre-rendering ) and keeping getting the same result as stated above. I have no idea why this is happening.
It says

By default, all pages are pre-rendered.

AoSankaku Sep 11, 2024
Author

Sorry, I just noticed the html is properly generated. I just didn't notice because the html file is poorly formatted. This certainly contains h1 and other component in +Pages.js.

<!DOCTYPE html>
    <html lang="en">
      <head>
        <link rel="stylesheet" type="text/css" href="/assets/static/vike-react-b64a028b.B6DZbHFi.css">
        <link rel="stylesheet" type="text/css" href="/assets/static/layouts_style-b34a8e57.C0Wrw6FH.css">
        <meta charset="UTF-8" />
        
    
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description" content="Demo showcasing Vike"/><link rel="icon" href="/assets/static/logo.2_7Lo9tV.svg"/>
    
    
    
  
      </head>
      <body>
        
        <div id="root"><div style="display:flex;max-width:900px;margin:auto"><div id="sidebar" style="padding:20px;flex-shrink:0;display:flex;flex-direction:column;line-height:1.8em;border-right:2px solid #eee"><div style="margin-top:20px;margin-bottom:10px"><a href="/"><img src="/assets/static/logo.2_7Lo9tV.svg" height="64" width="64" alt="logo"/></a></div><a href="/" class="is-active">Welcome</a><a href="/todo">Todo</a><a href="/star-wars">Data Fetching</a></div><div id="page-container"><div id="page-content" style="padding:20px;padding-bottom:50px;min-height:100vh"><h1>My Vike app</h1><h2>title</h2>This page is:<ul><li>Rendered to HTML.</li><li>Interactive. <button type="button">Counter <!-- -->0</button></li></ul><button>日語</button><button>English</button></div></div></div></div>
        
        <script id="vike_pageContext" type="application/json">{"_configFromHook":"!undefined","abortReason":"!undefined","_urlRewrite":null,"_urlRedirect":"!undefined","abortStatusCode":"!undefined","_abortCall":"!undefined","_pageContextInitIsPassedToClient":"!undefined","_pageId":"/pages/index","routeParams":{},"data":"!undefined"}</script>
        <script src="/assets/entries/entry-client-routing.dl1m-QC2.js" type="module" async></script>
        <link rel="modulepreload" href="/assets/entries/pages_index.B9T_QHSJ.js" as="script" type="text/javascript">
        <link rel="modulepreload" href="/assets/chunks/chunk-CIEdgFt5.js" as="script" type="text/javascript">
        <link rel="modulepreload" href="/assets/chunks/chunk-MuvMlo7S.js" as="script" type="text/javascript">
      </body>
    </html>

Is there any way to format the output file on build... or planning to add an option or is there an extention to do this?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

My vite+vike project is not prerendering at all #1864

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 8 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

My vite+vike project is not prerendering at all #1864

AoSankaku Sep 9, 2024

My repository (language-rework branch)

My goals are:

Replies: 2 comments · 8 replies

brillout Sep 9, 2024 Maintainer

AoSankaku Sep 9, 2024 Author

dist/client/index.html

brillout Sep 11, 2024 Maintainer

AoSankaku Sep 11, 2024 Author

brillout Sep 11, 2024 Maintainer

AoSankaku Sep 11, 2024 Author

AoSankaku Sep 11, 2024 Author

AoSankaku
Sep 9, 2024

Replies: 2 comments 8 replies

brillout
Sep 9, 2024
Maintainer

AoSankaku
Sep 9, 2024
Author

brillout Sep 11, 2024
Maintainer

AoSankaku Sep 11, 2024
Author

brillout Sep 11, 2024
Maintainer

AoSankaku Sep 11, 2024
Author

AoSankaku Sep 11, 2024
Author