동일한 코드 베이스에서 SSR 웹 애플리케이션 및 모바일 앱을 빌드하는 방법

서버 측 렌더링은 초기 페이지 로드 속도를 향상시킵니다. 브라우저는 서버에서 미리 렌더링된 HTML을 수신하므로 페이지를 만드는 데 걸리는 시간이 줄어듭니다.

또한 SSR 사이트는 SEO와 더 잘 어울립니다. 검색 엔진 크롤러는 JS 코드를 실행하지 않고 사이트의 HTML 콘텐츠를 가져옵니다. SSR이 없으면 검색 엔진은 페이지 콘텐츠를 색인화하지 않고 내부 링크를 찾지 않습니다.

NuxtJS에는 Server-side rendering 기능이 있습니다.

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.

그러나 모바일 애플리케이션용 정적 사이트를 구축할 때는 SSR을 사용할 수 없습니다. 여기에서는 CapacitorJS 및 NuxtJS를 사용하여 동일한 코드 베이스에서 SSR 웹 및 크로스 플랫폼 모바일 애플리케이션을 만드는 방법을 보여줍니다.

앱 빌드

예를 들어 Kyiv에 현지 시간을 표시하는 간단한 앱을 빌드합니다.

SSR을 테스트하려면 API 서버에서 데이터를 가져와야 합니다. worldtimeapi.org 메서드를 사용하여 useFetch API에서 데이터를 수신합니다.

.
app.vue 파일을 제거하고 다음 내용으로 pages/index.vue를 추가합니다.

<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>

여기에 우리가 있습니다:

const timeData 변수에서 현재 시간을 검색합니다.

🕥 페이지에 시간 표시.

🔄 새로고침 버튼.

실행yarn dev 및 확인http://localhost:3000/:



페이지 소스 코드를 살펴보겠습니다.



NuxtJS에서 서버 측 렌더링은 기본적으로 활성화되어 있습니다. 하지만 모바일 빌드를 위한 정적 사이트를 만들면 무엇을 얻을 수 있을까요? 실행yarn generate && yarn preview 및 다시 확인http://localhost:3000/ .

페이지를 새로 고치려고 하면 시간이 변경되지 않는 것을 볼 수 있습니다. NuxtJS는 정적 사이트 생성 중에 서버에서 시간을 검색하여 미리 렌더링된 HTML 페이지에 저장했습니다.
ssr: false에 nuxt.config.ts를 더해보자

import { defineNuxtConfig } from 'nuxt'

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

yarn generate && yarn preview로 사이트를 재구축합니다.

이제 NuxtJS는 클라이언트 측에서 HTTP 요청을 실행합니다. 페이지 소스에는 날짜/시간이 없으며 페이지를 새로고침할 때마다 날짜/시간이 변경됩니다.



따라서 클라이언트 전용 모드에서 SSR 및 모바일 애플리케이션을 사용하여 웹 애플리케이션을 빌드해야 합니다. 환경 플래그MOBILE_BUILD를 사용하겠습니다. MOBILE_BUILD=0로 웹 애플리케이션을 빌드하고 MOBILE_BUILD=1로 모바일 애플리케이션을 빌드합니다.
.env 파일을 사용하여 환경 변수를 저장할 수 있으며 저는 export MOBILE_BUILD=1 를 사용하겠습니다.

변경nuxt.config.ts :

import { defineNuxtConfig } from 'nuxt'

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

yarn generate && yarn preview를 실행하고 응용 프로그램이 클라이언트 전용 모드에서 작동하는지 확인합니다.

마지막으로 Android 애플리케이션을 빌드하고 확인합니다.

yarn cap sync
yarn cap open android

에뮬레이터에서 애플리케이션을 실행하고 새로 고침 버튼이 작동하는지 확인합니다.



🎉 축하합니다. 작동합니다(제 노트북에서는 적어도 🙂).