Forem: EZ

Building a Server-Side Rendering (SSR) Plugin for Vite

EZ — Tue, 04 Mar 2025 20:22:39 +0000

Server-Side Rendering (SSR) is a powerful technique for improving the performance and SEO of modern web applications. Vite provides excellent support for SSR out of the box, but you can extend its functionality by creating custom plugins tailored to your project's needs.

In this post, we’ll walk through creating a custom Vite plugin to enhance SSR support. This plugin will help you streamline SSR-specific logic, such as handling server-side entry points and optimizing SSR builds.

Why Build an SSR Plugin for Vite?

While Vite supports SSR natively, you might want to:

Automate the creation of SSR entry points.
Optimize SSR builds for performance.
Inject SSR-specific environment variables.
Add custom middleware or server logic.

By building a custom plugin, you can encapsulate these tasks and make your SSR setup more maintainable.

Example: Creating an SSR Plugin for Vite

Let’s create a custom Vite plugin that simplifies SSR setup. This plugin will:

Automatically generate an SSR entry point if it doesn’t exist.
Inject SSR-specific environment variables.
Optimize the SSR build process.

Step 1: Set Up a Vite Project

If you don’t already have a Vite project, create one:

npm create vite@latest my-vite-ssr-app
cd my-vite-ssr-app
npm install

Step 2: Install SSR Dependencies

Install the necessary dependencies for SSR:

npm install express --save

Step 3: Create the SSR Plugin

Create a new file for your plugin, e.g., vite-plugin-ssr.js:

import fs from 'fs';
import path from 'path';

export default function vitePluginSsr(options = {}) {
  const { entry = 'src/entry-server.js', outDir = 'dist/server' } = options;

  return {
    name: 'vite-plugin-ssr',

    // Generate SSR entry point if it doesn't exist
    configResolved(config) {
      const entryPath = path.resolve(config.root, entry);
      if (!fs.existsSync(entryPath)) {
        fs.writeFileSync(
          entryPath,
          `export default function render() {
  return { html: '<div>Hello from SSR!</div>' };
}`
        );
        console.log(`Generated SSR entry point at ${entryPath}`);
      }
    },

    // Inject SSR-specific environment variables
    config(config, env) {
      return {
        define: {
          'process.env.SSR': JSON.stringify(env.mode === 'production'),
        },
      };
    },

    // Optimize SSR build
    buildStart() {
      console.log('Building for SSR...');
    },

    // Modify the output directory for SSR builds
    generateBundle(options, bundle) {
      if (options.format === 'cjs') {
        for (const file in bundle) {
          const chunk = bundle[file];
          if (chunk.type === 'chunk') {
            chunk.fileName = path.join(outDir, chunk.fileName);
          }
        }
      }
    },
  };
}

Step 4: Integrate the Plugin into Your Vite Config

Open your vite.config.js file and import the plugin:

import { defineConfig } from 'vite';
import vitePluginSsr from './vite-plugin-ssr';

export default defineConfig({
  plugins: [
    vitePluginSsr({
      entry: 'src/entry-server.js', // Customize the SSR entry point
      outDir: 'dist/server', // Customize the SSR output directory
    }),
  ],
  build: {
    ssr: true, // Enable SSR build
  },
});

Step 5: Create an SSR Server

Create a simple Express server to render your app:

// server.js
import express from 'express';
import { createServer } from 'vite';
import path from 'path';

async function createSsrServer() {
  const app = express();
  const vite = await createServer({
    server: { middlewareMode: true },
    appType: 'custom',
  });

  app.use(vite.middlewares);

  app.use('*', async (req, res) => {
    const { render } = await vite.ssrLoadModule('/src/entry-server.js');
    const { html } = render();
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>SSR with Vite</title>
        </head>
        <body>
          <div id="app">${html}</div>
        </body>
      </html>
    `);
  });

  app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
  });
}

createSsrServer();

Step 6: Test the Plugin

Build your SSR app and start the server:

npm run build
node server.js

Visit http://localhost:3000 to see your SSR app in action!

How the Plugin Works

Entry Point Generation: The plugin checks if an SSR entry point exists and creates one if it doesn’t.
Environment Variables: It injects SSR-specific environment variables, such as process.env.SSR.
Build Optimization: The plugin modifies the output directory for SSR builds and logs build progress.
Custom Logic: You can extend the plugin to add more SSR-specific features, such as middleware or server-side logic.

Customizing the Plugin

You can extend this plugin to suit your needs. For example:

Add support for custom SSR frameworks (e.g., React, Vue, Svelte).
Optimize SSR builds for performance (e.g., code splitting, tree-shaking).
Add middleware for handling SSR-specific routes or APIs.

Vue 3 Currency Converter Component

EZ — Sat, 09 Mar 2024 21:56:59 +0000

In this article I'm going to share how to write vue3 component that convert currencies with calculation of user bonuses (it means if you give users promo codes or any other benefits).

Basic layout

First we need to make a sketch of our component template:

<template>
  <div>
    <input 
      :class="$style.input" 
      @input="valueHandler(($event.target as HTMLInputElement).value)" 
      @keypress="press" v-model="value"
    >EUR
  </div>
  <div>You will receive with bonus</div>
  <div>
    <input 
      :class="$style.input" 
      @input="valueReceiveHandle(($event.target as HTMLInputElement).value)" 
      v-model="valueReceive"
      @keypress="press"
    >USD
  </div>
</template>

<style module>
.input {
  border: solid 2px #cdcdcd;
  padding: 10px 15px;
  margin: 10px;
  font-size: 16px;
}
</style>

In input handler function I set event target value from template because I want to call this one in another component parts

Currency Conversion Logic

Ok, how it works when user enters some data.
When user enters data to the first input your function should to convert source value by currency rate and update value in second input. We need create two variables value and valueReceive and set as v-model directive value.

const value = ref(100)
const valueReceive = ref(0)

Then write the pure conversion functions:

const convert = (value: number) => {
  return  Number(value.toFixed(2))
}


type ConverterType = {
  value: number;
  rate: number;
}

const convertTo = ({ value, rate }: ConverterType) => {
  return convert(value * rate)
}

const convertFrom = ({ value, rate }: ConverterType) => {
  return convert(value / rate)
}

Component handlers

After that let's define component props rate and modelValue:

const props = withDefaults(
  defineProps<
    Partial<{
      rate: number;
    }>
    & {
      modelValue: number;
    }
  >()
  ,
  {
    rate: 1,
  }
)

Define handle functions for inputs:

const valueHandler = (value: number | string) => {
  valueReceive.value = convertTo({ value:  Number(value), rate: props.rate })
}

const valueReceiveHandle = (_value: number | string) => {
  value.value = convertFrom({
    value: Number(_value),
    rate: props.rate
  })
}

It looks good, but let's add watcher for modelValue prop. It will call valueHandler and emit for update modelValue, and don't forget to set immediate: true, otherwise it wont fire when the component is mounted or component takes on newest value.

const emits = defineEmits<{
  'update:modelValue': [value: number]
}>()

watch(() => props.modelValue, (_value: number) => {
  emits('update:modelValue', _value)
  value.value = _value
  valueHandler(_value)
}, {
  immediate: true
})

So this works, but how about handling a user's keypress, because if a user can enter any symbols, this is not expected behavior for the component - accept only numbers and dot:

const press = (e: KeyboardEvent) => {
  const onlyDigitsAndDots = /^[0-9]*\.?[0-9]*$/
  if (!onlyDigitsAndDots.test(e.key)) e.preventDefault()
}

User bonuses

After writing the main logic, let's imagine, customer (your project manager for example) comes to us and says: "I want to the app gives users the opportunity to apply bonuses and make calculations". We say: "Ok, it's easy"

We need to write two functions: calculateBonus (will calculate bonus in receive input) and subtractBonus (will subtract the bonus from final value and set it to value input), and bonusPercent prop.

type BonusType = {
  value: number;
  percent: number;
}

const calculateBonus = ({value, percent}: BonusType) => {
  return value + (value * (percent / 100))
}

const subtractBonus = ({ value, percent }: BonusType) => {
  return value / (1 + percent / 100)
}

Let's refactor our handle functions:

const valueReceiveHandle = (_value: number | string) => {
  value.value = convertFrom({
    value: subtractBonus({value: Number(_value), percent: props.bonusPercent}),
    rate: props.rate
  })
}

const valueHandler = (value: number | string) => {
  const _value = props.bonusPercent ? calculateBonus({
    value: Number(value), percent: props.bonusPercent
  }) : Number(value)
  valueReceive.value = convertTo({ value: _value, rate: props.rate })
}

Use it

How to use converter component:

<template>
  <CurrencyConverter
    v-model="value"
    :rate="1.08"
    :bonus-percent="27"
  />
</template>

<script setup lang="ts">
import CurrencyConverter from './components/CurrencyConverter.vue'
import { ref } from 'vue';

const value = ref(100)
</script>