construct the SSR net utility and cell apps from the identical code base

Server-side rendering improves preliminary web page load pace. The browser receives pre-rendered HTML from the server, so it takes much less time to construct the web page.

Additionally, SSR websites play higher with search engine optimization. Search engine crawlers seize the location’s HTML content material with out executing JS code. With out SSR, engines like google is not going to index web page content material and won’t discover inner hyperlinks.

NuxtJS has a Server-side rendering characteristic:

Server-side rendering (SSR), is the power of an utility to contribute by displaying the web-page on the server as an alternative of rendering it within the browser. Server-side sends a totally rendered web page to the shopper.

However you can’t use SSR while you construct a static website for the cell utility. Right here I will present the right way to create an SSR net and cross-platform cell utility from the identical code base utilizing CapacitorJS and NuxtJS.

Constructing the app

For example, we are going to construct a easy app to indicate native time in Kyiv.

To check SSR, we have to get information from the API server. We’ll obtain information from worldtimeapi.org API utilizing the useFetch technique.

Let’s begin with the applying from the earlier information.

Take away app.vue file and add pages/index.vue with the next content material:

<template>
  <div>
    <h1>🇺🇦 Kyiv Time</h1>

    <p>
      🕥 Present time: <b>{{ timeData.datetime }}</b>
      <a @click on="$nuxt.refresh()" href="">🔄</a>
    </p>
  </div>
</template>

<script setup>
const { information: timeData } = await useFetch('https://worldtimeapi.org/api/timezone/Europe/Kiev')

</script>

Right here we have now:

• Retrieving present time in const timeData variable.
• 🕥 displaying time on the web page.
• 🔄 refresh button.

Run yarn dev and examine http://localhost:3000/ what we have now:

Let us take a look at the web page supply code:

In NuxtJS, Server-side rendering is enabled by default. However what is going to we get if we create a static website for the cell construct? Run yarn generate && yarn preview and recheck http://localhost:3000/.

Should you attempt to refresh the web page, you will note that point would not change. NuxtJS retrieved time from the server throughout static website era and saved it within the pre-rendered HTML web page.

Let’s add ssr: false to the nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    ssr: false,
})

and rebuild the location with yarn generate && yarn preview.

Now NuxtJS runs HTTP requests on the shopper facet. There isn’t any datetime within the web page sources, and datetime modifications each time you refresh a web page.

So, we should construct an internet utility with SSR and a cell utility in client-only mode. Let’s use an atmosphere flag MOBILE_BUILD: we are going to construct an internet utility with MOBILE_BUILD=0 and a cell utility with MOBILE_BUILD=1.

You should utilize a .env file to retailer atmosphere variables, and I will go along with export MOBILE_BUILD=1.

Change nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    ssr: !course of.env.MOBILE_BUILD,
})

Run yarn generate && yarn preview and confirm that the applying works in client-only mode.

Lastly, let’s construct and examine the Android utility:

yarn cap sync
yarn cap open android

Run the applying on an emulator and examine that the refresh button works.

🎉 Congratulations, it really works (on my laptop computer, a minimum of 🙂).