[sveltekit] +page.js가 필요한 이유

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다.

하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 

 

간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다.

(스벨트킷은 자동으로  $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 

타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기 보시면 된다. (https://kit.svelte.dev/docs/types#app)

 

 

어째튼 용도는 폴더의 이름으로 url이 리퀘스트 되면  +page.js이 먼저 실행되어 화면에 들어가는 데이터를 +page.svelte파일에 전달해주고 그걸 가지고 랜더링을 한다.

 

아래는 +page.svelte에서 onMount시 화면에 필요한 데이터를 받아오는 코드이다.

<script>
import {onMount} from 'svelte'

let datas=[];
onMount(async()=>{
  let res = await fetch('https://api.fake-rest.refine.dev/posts')
  datas = await res.json()
  console.log(datas)
})

</script>
{#each datas as data}
  <div>{data.title}</div>
{/each}

 

페이지 소스를 봤을때 div안이 비어 있다.

 

다음은 +page.js와 +page.svelte를 나누어서 +page.js에서 데이터를 요청하여 +page.svelte에 전달 하는 경우이다.

 

+page.js

  export async function load() {
    let res = await fetch('https://api.fake-rest.refine.dev/posts')
    let posts = await res.json()
    return {
      posts
    };
  }

 

+page.svelte

<script>
  import { error } from '@sveltejs/kit';
  export let data;
</script>
  {#each data.posts as post}
    <div>{post.title}</div>
  {/each}

위에 보듯이 전달은 data 변수를 통해 전달된다.  전의 예제와 다르게 리퀘스트 된 데이터가 페이지 소스에 랜더링 되어 추가된 것을 볼 수있다.

이를 통해 서버사이드랜더링을 할 수 있다! 또한 +page.server.js를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다.