Hone logo
Hone
Problems

Implementing Server-Side Rendering (SSR) in a Vue.js Application with TypeScript

Server-Side Rendering (SSR) enhances Vue.js applications by rendering components on the server before sending the HTML to the client. This improves initial load times, SEO, and perceived performance, especially for content-heavy applications. This challenge guides you through setting up a basic SSR environment using Vue.js, TypeScript, and a simple Node.js server.

Problem Description

You are tasked with creating a minimal Vue.js application with SSR functionality. The application should display a simple message ("Hello from SSR!") and include a component that fetches data from a mock API endpoint. The server should render the initial HTML on the server and then hydrate the client-side Vue application.

What needs to be achieved:

  1. Project Setup: Create a Vue.js project with TypeScript configured.
  2. Component Creation: Develop a simple Vue component that displays a static message.
  3. Data Fetching Component: Create another component that fetches data from a mock API endpoint (using fetch or axios). For simplicity, the mock API will return a JSON object with a single key "message" and a string value.
  4. Server Setup: Implement a Node.js server using Express.js to handle SSR. The server should:
    • Serve the static assets (HTML, CSS, JavaScript) of the Vue application.
    • Render the Vue application using vue-server-renderer.
    • Pass the necessary data (if any) to the Vue application during rendering.
  5. Client-Side Hydration: Ensure the client-side Vue application is properly hydrated after the initial server-rendered HTML is received.

Key Requirements:

  • Use Vue.js 3.
  • Use TypeScript for type safety.
  • Utilize vue-server-renderer for SSR.
  • Employ a simple Node.js server with Express.js.
  • Implement a mock API endpoint for data fetching.
  • Ensure proper client-side hydration.

Expected Behavior:

  1. When a user requests the application's root route, the server should render the initial HTML, including the static message and the data fetched from the mock API.
  2. The HTML should be sent to the client.
  3. The client-side Vue application should hydrate, taking over from the server-rendered state.
  4. Subsequent interactions on the client-side should be handled by the client-side Vue application.

Edge Cases to Consider:

  • Handling API request failures gracefully (e.g., displaying an error message).
  • Ensuring the server and client versions of Vue are compatible.
  • Properly configuring the vue-server-renderer options for optimal performance.

Examples

Example 1:

Input: User requests the root route ("/")
Output: HTML containing: "<div id="app">Hello from SSR!</div> <div id="data-container">Message from API: [API Response Message]</div>"
Explanation: The server renders the initial HTML, including the static message and the data fetched from the mock API. The client hydrates the Vue app.

Example 2:

Input: Mock API returns: { "message": "Data fetched successfully!" }
Output: HTML containing: "<div id="app">Hello from SSR!</div> <div id="data-container">Message from API: Data fetched successfully!</div>"
Explanation: The data fetched from the mock API is displayed within the `data-container` div.

Example 3: (API Failure)

Input: Mock API returns an error (e.g., 500 Internal Server Error)
Output: HTML containing: "<div id="app">Hello from SSR!</div> <div id="data-container">Error fetching data.</div>"
Explanation: The component handles the API error and displays an appropriate error message.

Constraints

  • The mock API endpoint should return a JSON response within 200ms.
  • The application should be able to handle at least 10 concurrent requests without significant performance degradation.
  • The server should listen on port 3000.
  • The project should use a reasonable file structure for maintainability.
  • The code should be well-commented and follow TypeScript best practices.

Notes

  • You can use a simple fetch call for the API request. A mock API can be simulated using a simple Node.js endpoint or a static JSON file.
  • Consider using vue-loader for component compilation.
  • Pay close attention to the vue-server-renderer configuration options, particularly template and clientManifest.
  • Focus on the core SSR functionality; advanced features like code splitting or hot module replacement are not required for this challenge.
  • The goal is to demonstrate a functional SSR setup, not to create a production-ready application.
Loading editor...
typescript