@nuxt/docs-nightly 4.0.0-29183859.14dd686b → 4.0.0-29188223.d975ea36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -76,17 +76,27 @@ Any redirection on the server will result in a `Location:` header being sent to
|
|
|
76
76
|
|
|
77
77
|
:read-more{to="/docs/guide/directory-structure/middleware"}
|
|
78
78
|
|
|
79
|
-
### Step 6:
|
|
79
|
+
### Step 6: Render Page and Components
|
|
80
80
|
|
|
81
|
-
Nuxt
|
|
81
|
+
Nuxt renders the page and its components and fetches any required data with `useFetch` and `useAsyncData` during this step. Since there are no dynamic updates and no DOM operations occur on the server, Vue lifecycle hooks such as `onBeforeMount`, `onMounted`, and subsequent hooks are **NOT** executed during SSR.
|
|
82
|
+
|
|
83
|
+
By default, Vue pauses dependency tracking during SSR for better performance.
|
|
84
|
+
|
|
85
|
+
::callout{icon="i-lucide-lightbulb"}
|
|
86
|
+
There is no reactivity on the server side because Vue SSR renders the app top-down as static HTML, making it impossible to go back and modify content that has already been rendered.
|
|
87
|
+
::
|
|
82
88
|
|
|
83
89
|
::important
|
|
84
90
|
You should avoid code that produces side effects that need cleanup in root scope of `<script setup>`. An example of such side effects is setting up timers with `setInterval`. In client-side only code we may setup a timer and then tear it down in `onBeforeUnmount` or `onUnmounted`. However, because the unmount hooks will never be called during SSR, the timers will stay around forever. To avoid this, move your side-effect code into `onMounted` instead.
|
|
85
91
|
::
|
|
86
92
|
|
|
87
|
-
|
|
93
|
+
::tip{icon="i-lucide-video" to="https://youtu.be/dZSNW07sO-A" target="_blank"}
|
|
94
|
+
Watch a video from Daniel Roe explaining Server Rendering and Global State.
|
|
95
|
+
::
|
|
96
|
+
|
|
97
|
+
### Step 7: Generate HTML Output
|
|
88
98
|
|
|
89
|
-
After all
|
|
99
|
+
After all required data is fetched and the components are rendered, Nuxt combines the rendered components with settings from `unhead` to generate a complete HTML document. This HTML, along with the associated data, is then sent back to the client to complete the SSR process.
|
|
90
100
|
|
|
91
101
|
::callout{icon="i-lucide-lightbulb"}
|
|
92
102
|
After rendering the Vue application to HTML, Nuxt calls the [`app:rendered`](/docs/api/advanced/hooks#app-hooks-runtime) hook.
|