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
Collaborator

<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
Collaborator

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

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

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

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

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 Collaborator

MarioIshac Nov 6, 2024 Author

hi-ogawa Nov 6, 2024 Collaborator

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
Collaborator

MarioIshac Nov 6, 2024
Author

hi-ogawa Nov 6, 2024
Collaborator