DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to build the SSR web application and mobile apps from the same code base
Yevhen Bondar for Daiquiri Team

Posted on

How to build the SSR web application and mobile apps from the same code base

Server-side rendering improves initial page load speed. The browser receives pre-rendered HTML from the server, so it takes less time to build the page.

Also, SSR sites play better with SEO. Search engine crawlers grab the site's HTML content without executing JS code. Without SSR, search engines will not index page content and will not find internal links.

NuxtJS has a Server-side rendering feature:

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. Server-side sends a fully rendered page to the client.

But you cannot use SSR when you build a static site for the mobile application. Here I'll show how to create an SSR web and cross-platform mobile application from the same code base using CapacitorJS and NuxtJS.

Building the app

As an example, we will build a simple app to show local time in Kyiv.

To test SSR, we need to get data from the API server. We will receive data from worldtimeapi.org API using the useFetch method.

Let's start with the application from the previous guide.

Remove app.vue file and add pages/index.vue with the following content:

<template>
  <div>
    <h1>πŸ‡ΊπŸ‡¦ Kyiv Time</h1>

    <p>
      πŸ•₯ Current time: <b>{{ timeData.datetime }}</b>
      <a @click="$nuxt.refresh()" href="">πŸ”„</a>
    </p>
  </div>
</template>

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

</script>
Enter fullscreen mode Exit fullscreen mode

Here we have:

  • Retrieving current time in const timeData variable.
  • πŸ•₯ displaying time on the page.
  • πŸ”„ refresh button.

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

Let's look at the page source code:

In NuxtJS, Server-side rendering is enabled by default. But what will we get if we create a static site for the mobile build? Run yarn generate && yarn preview and recheck http://localhost:3000/.

If you try to refresh the page, you will see that time doesn't change. NuxtJS retrieved time from the server during static site generation and saved it in the pre-rendered HTML 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,
})
Enter fullscreen mode Exit fullscreen mode

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

Now NuxtJS runs HTTP requests on the client side. There is no datetime in the page sources, and datetime changes every time you refresh a page.

So, we must build a web application with SSR and a mobile application in client-only mode. Let's use an environment flag MOBILE_BUILD: we will build a web application with MOBILE_BUILD=0 and a mobile application with MOBILE_BUILD=1.

You can use a .env file to store environment variables, and I'll go 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: !process.env.MOBILE_BUILD,
})
Enter fullscreen mode Exit fullscreen mode

Run yarn generate && yarn preview and verify that the application works in client-only mode.

Finally, let's build and check the Android application:

yarn cap sync
yarn cap open android
Enter fullscreen mode Exit fullscreen mode

Run the application on an emulator and check that the refresh button works.

πŸŽ‰ Congratulations, it works (on my laptop, at least πŸ™‚).

Top comments (2)

Collapse
 
kissu profile image
Konstantin BIFERT

Looks like Capacitor is quite powerful, there is even an official module for Nuxt3 as of today: github.com/danielroe/nuxt-ionic
Maybe nice to also give that one a try!

One of my friends did a nice presentation of that one on YT: youtu.be/-FwQ6c6OreQ

Otherwise...since it works on your laptop, it's time to ship your laptop to your client. 😹
Jokes aside, congratz for the blog post! πŸ’ͺ🏻

Collapse
 
eugen1j profile image
Yevhen Bondar

I wish I could ship my laptop to AppStore and PlayMarket πŸ˜€

Thank you!

12 Rarely Used Javascript APIs You Need

>> Check out this classic DEV post <<