docs: align SSR StackBlitz examples with button markup

examples/ssr-example-basic/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "node server.js"
+}

examples/ssr-example-basic/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "node-starter",
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "express": "^4.17.2",
+    "vue": "^3.2.26"
+  }
+}

examples/ssr-example-basic/server.js

@@ -0,0 +1,30 @@
+import express from 'express';
+import { createSSRApp } from 'vue';
+import { renderToString } from 'vue/server-renderer';
+
+const server = express();
+
+server.get('/', (req, res) => {
+  const app = createSSRApp({
+    data: () => ({ count: 1 }),
+    template: `<button @click="count++">{{ count }}</button>`,
+  });
+
+  renderToString(app).then((html) => {
+    res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vue SSR Example</title>
+      </head>
+      <body>
+        <div id="app">${html}</div>
+      </body>
+    </html>
+    `);
+  });
+});
+
+server.listen(3000, () => {
+  console.log('ready');
+});

examples/ssr-example/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "node server.js"
+}

examples/ssr-example/app.js

@@ -0,0 +1,8 @@
+import { createSSRApp } from 'vue';
+
+export function createApp() {
+  return createSSRApp({
+    data: () => ({ count: 1 }),
+    template: `<button @click="count++">{{ count }}</button>`,
+  });
+}

examples/ssr-example/client.js

@@ -0,0 +1,3 @@
+import { createApp } from './app.js';
+
+createApp().mount('#app');

examples/ssr-example/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "node-starter",
+  "version": "0.0.0",
+  "type": "module",
+  "dependencies": {
+    "express": "^4.17.2",
+    "vue": "^3.2.26"
+  }
+}

examples/ssr-example/server.js

@@ -0,0 +1,37 @@
+import express from 'express';
+import { renderToString } from 'vue/server-renderer';
+import { createApp } from './app.js';
+
+const server = express();
+
+server.get('/', (req, res) => {
+  const app = createApp();
+
+  renderToString(app).then((html) => {
+    res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>Vue SSR Example</title>
+        <script type="importmap">
+          {
+            "imports": {
+              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+            }
+          }
+        </script>
+        <script type="module" src="/client.js"></script>
+      </head>
+      <body>
+        <div id="app">${html}</div>
+      </body>
+    </html>
+    `);
+  });
+});
+
+server.use(express.static('.'));
+
+server.listen(3000, () => {
+  console.log('ready');
+});

src/guide/scaling-up/ssr.md

@@ -126,7 +126,7 @@ server.listen(3000, () => {
 
 Finally, run `node server.js` and visit `http://localhost:3000`. You should see the page working with the button.
 
-[Try it on StackBlitz](https://stackblitz.com/fork/vue-ssr-example-basic?file=index.js)
+[Try it on StackBlitz](https://stackblitz.com/github/vuejs/docs/tree/main/examples/ssr-example-basic?file=index.js)
 
 ### Client Hydration {#client-hydration}
 
@@ -198,7 +198,7 @@ In addition, in order to load the client files in the browser, we also need to:
 2. Load the client entry by adding `<script type="module" src="/client.js"></script>` to the HTML shell.
 3. Support usage like `import * from 'vue'` in the browser by adding an [Import Map](https://html.spec.whatwg.org/multipage/webappapis.html#import-maps) to the HTML shell.
 
-[Try the completed example on StackBlitz](https://stackblitz.com/fork/vue-ssr-example?file=index.js). The button is now interactive!
+[Try the completed example on StackBlitz](https://stackblitz.com/github/vuejs/docs/tree/main/examples/ssr-example?file=index.js). The button is now interactive!
 
 ## Higher Level Solutions {#higher-level-solutions}