docs: added example of what's run on client and server

docs/2.guide/1.concepts/3.rendering.md

@@ -13,12 +13,37 @@ By default, Nuxt uses **universal rendering** to provide better user experience,
 
 This step is similar to traditional **server-side rendering** performed by PHP or Ruby applications. When the browser requests a URL with universal (server-side + client-side) rendering enabled, Nuxt runs the JavaScript (Vue.js) code in a server environment and returns a fully rendered HTML page to the browser. Nuxt may also return a fully rendered HTML page from a cache if the page was generated in advance. Users immediately get the entirety of the initial content of the application, contrary to client-side rendering.
 
-The initial HTML document returned by the server is not interactive on the browser just yet. Once the HTML document has been downloaded, The browser interprets this and Vue.js takes control of the document. The same JavaScript code that once ran on the server runs on the client (browser) **again** in the background, enabling interactivity (hence **Universal rendering**). This is called is called **Hydration**. When the hydration is complete, the page can enjoy benefits such as dynamic interfaces and page transitions, that are prevalent in Client-side rendered web applications.
+The initial HTML document returned by the server is not interactive on the browser just yet. Once the HTML document has been downloaded, The browser interprets this and Vue.js takes control of the document. The same JavaScript code that once ran on the server runs on the client (browser) **again** in the background, enabling interactivity (hence **Universal rendering**). This is called is called **Hydration**. When the hydration is complete, the page can enjoy benefits such as dynamic interfaces and page transitions.
 
 Universal rendering allows a Nuxt application to provide quick page load times while preserving the benefits of client-side rendering. Furthermore, as the content is already present in the HTML document, crawlers can index it without overhead.
 
 ![Users can access the static content when the HTML document is loaded. Hydration then allows page's interactivity](/assets/docs/concepts/rendering/ssr.svg)
 
+**What's server-rendered and what's client-rendered**
+
+It is normal to ask which parts of a Vue file runs on the server and/or the client in universal rendering mode. 
+
+```vue [app.vue]
+<script setup lang="ts">
+const counter = ref(0);
+
+const handleClick = () => {
+  counter.value++;
+};
+</script>
+
+<template>
+  <div>
+    <p>Count: {{ counter }}</p>
+    <button @click="handleClick">Increment</button>
+  </div>
+</template>
+```
+
+On the initial page load, the counter ref is executed in the server since it is required inside the `<p>` tag. The contents of `handleClick` is never executed in the server. During hydration, `handleClick` binds itself to the button; hence, it is reasonable to deduce that the body of `handleClick` will always run in a browser environment.
+
+Most code that runs in a server environment also runs on the client. You can restrict this by forcing individual components to render on the client only. For example, plugins and components with a `.client` suffix are client-rendered only. 
+
 **Benefits of server-side rendering:**
 - **Performance**: Users can get immediate access to the page's content because browsers can display static content much faster than JavaScript-generated content. At the same time, Nuxt preserves the interactivity of a web application during the hydration process.
 - **Search Engine Optimization**: Universal rendering delivers the entire HTML content of the page to the browser as a classic server application. Web crawlers can directly index the page's content, which makes Universal rendering a great choice for any content that you want to index quickly.