How to enable SSR per page, not just of `App`? #381

MarioIshac · 2024-11-05T23:24:02Z

MarioIshac
Nov 5, 2024

For playground/ssr-react, when running server.js and requesting /env, I get this:

<!doctype html> <html lang="en"> <head> <script type="module"> import RefreshRuntime from "/@react-refresh" RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.__vite_plugin_react_preamble_installed__ = true </script> <script type="module" src="/@vite/client"></script> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="app"><nav><ul><li><a href="/about">About</a></li><li><a href="/env">Env</a></li><li><a href="/">Home</a></li></ul></nav><h1>API_KEY_qwertyuiop</h1></div> <script type="module" src="/src/entry-client.jsx"></script> </body> </html>

As you can see inside the div of the body, only the App layout is rendered, not the Env I requested. In the browser, I then see that the client side router takes over and renders Env client-side.

Is it possible to have SSR per page with the entire component tree of that page rendered upfront, not just App?

Answered by hi-ogawa

Nov 6, 2024

<h1>API_KEY_qwertyuiop</h1> is what's rendered by pages/Env.jsx so it looks working though. What do you expect to see instead?

vite-plugin-react/playground/ssr-react/server.js

Line 10 in b61592a

process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'

vite-plugin-react/playground/ssr-react/src/pages/Env.jsx

Lines 1 to 7 in b61592a

     export default function Env() {  
   let msg = 'default message here'  
   try {  
   msg = process.env.MY_CUSTOM_SECRET || msg  
   } catch {}  
   return <h1>{msg}</h1>  
   }  
  

View full answer

hi-ogawa · 2024-11-06T00:27:53Z

hi-ogawa
Nov 6, 2024
Maintainer

<h1>API_KEY_qwertyuiop</h1> is what's rendered by pages/Env.jsx so it looks working though. What do you expect to see instead?

vite-plugin-react/playground/ssr-react/server.js

Line 10 in b61592a

process.env.MY_CUSTOM_SECRET = 'API_KEY_qwertyuiop'

vite-plugin-react/playground/ssr-react/src/pages/Env.jsx

Lines 1 to 7 in b61592a

     export default function Env() {  
   let msg = 'default message here'  
   try {  
   msg = process.env.MY_CUSTOM_SECRET || msg  
   } catch {}  
   return <h1>{msg}</h1>  
   }  
 

2 replies

MarioIshac Nov 6, 2024
Author

Apologies, my mistake! I was looking for "default message here" like I see in browser, but I realize that some process afterwards is replacing <h1>API_KEY_qwertyuiop</h1> with that right after page load (is that the hydration?), and that the page-specific SSR is still happening. Thank you for the quick clarification.

hi-ogawa Nov 6, 2024
Maintainer

Yeah, this isn't a best demo as it's expected to have hydration error, but I guess it's serving as test cases.
FYI, Remix team also has examples based on Vite on their repo https://github.com/remix-run/react-router/tree/main/examples if you haven't looked already.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to enable SSR per page, not just of `App`? #381

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

	export default function Env() {
	let msg = 'default message here'
	try {
	msg = process.env.MY_CUSTOM_SECRET \|\| msg
	} catch {}
	return <h1>{msg}</h1>
	}

Uh oh!

How to enable SSR per page, not just of App? #381

Uh oh!

Uh oh!

MarioIshac Nov 5, 2024

Replies: 1 comment · 2 replies

Uh oh!

hi-ogawa Nov 6, 2024 Maintainer

Uh oh!

Uh oh!

MarioIshac Nov 6, 2024 Author

Uh oh!

hi-ogawa Nov 6, 2024 Maintainer

How to enable SSR per page, not just of `App`? #381

MarioIshac
Nov 5, 2024

Replies: 1 comment 2 replies

hi-ogawa
Nov 6, 2024
Maintainer

MarioIshac Nov 6, 2024
Author

hi-ogawa Nov 6, 2024
Maintainer