[Nuxt.js] pages 데이터 가지고 오기 #async asyncData #SSR

문제❓

• Nuxt.js를 이용한 Highchart 예시를 만들면서 메인화면을 구성하던 도중 pages의 폴더와 파일 등을 자동으로 파악해 동적으로 변화는 메인화면을 구현하기 위해 psges에 존재하는 모든 파일 정보를 가지고 오고 싶습니다. 하지만 Nuxt.js는 SSR프로젝트다 보니 client내에서 pages의 파일 정보를 가지고 올 수 없었습니다.

해결방법❗

• async asyncData()를 이용해 SSR시 require.context('~/pages', true, /.vue$/);를 호출 해 .vue 확장자를 가진 모든 파일을 가지고 옵니다.

async asyncData란❓

• Nuxt.js 2에서 asyncData는 페이지 컴포넌트에서 사용할 수 있는 특별한 메서드입니다. 이 메서드는 Nuxt.js의 서버 사이드 렌더링(SSR) 기능과 함께 작동하며, 페이지가 로드되기 전에 비동기 데이터를 가져와 컴포넌트의 초기 데이터로 사용할 수 있습니다.
• asyncData 메서드는 Promise를 반환해야 하며, 해당 Promise는 컴포넌트의 데이터 객체에 병합됩니다. 서버에서 실행될 때는 서버 사이드에서 호출되고, 클라이언트에서 실행될 때는 라우터 이동이나 링크 클릭 등으로 호출됩니다.
• asyncData를 사용하면 서버에서 데이터를 가져와서 페이지를 렌더링될 때 초기 데이터로 사용할 수 있으므로, 초기 로딩에 필요한 데이터를 미리 가져와서 화면을 빠르게 렌더링 할 수 있습니다.
• 아래의 코드는 async asyncData를 이용해 pages정보를 가지고 와 chart로 그려주는 코드입니다.

<template>
    <div>
        <client-only>
            <highcharts
                :options="chartOptions" />
        </client-only>
    </div>
</template>

<script>
export default {
    data() {
        return {
            fileCount: 0,
            fileNames: [],
            files: {},
            folders: [],
            data: [],
            chartOptions:{}
        };
    },
    //SSR에서 데이터 패치
    async asyncData() {
        // /pages 아래의 .vue파일을 전부 가지고 온다.
        const context = require.context('~/pages', true, /\.vue$/);
        const folders = new Set();
        let files = {}
        let folderPath = []
        const fileNames = context.keys().map((key) => key.replace('./', ''));

        //key: 폴더, value: 파일들 형식으로 배열에 넣어준다.
        context.keys().forEach(fileName => {
            folderPath = fileName.split('.').join('').split('/').slice(0,-1).join('');
            if (!files[folderPath]) {
                files[folderPath] = [];
            }
            folders.add(folderPath)
            files[folderPath].push(fileName.split('./'+folderPath).join(''));
        });
        return {
            fileCount: fileNames.length,
            fileNames,
            files,
            folders
        };
    },
    beforeMount() {
        this.setData(this.folders, this.fileNames);
    },
    mounted() {
        const _this = this;
        this.chartOptions = {
            title: {
                text: 'Highcharts Sankey Diagram'
            },
            accessibility: {
                point: {
                    valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
                }
            },
            series: [{
                keys: ['from', 'to', 'weight'],
                data: this.data,
                type: 'sankey',
                name: 'Sankey demo series'
                ,
                events: {
                    click: function(event) {
                        _this.movePage(event)
                    }
                },
            }]
        }
    },
    methods:{
        //Highcharts Sankey Diagram의 데이터 형식에 맞게 데이터를 넣어준다.
        setData(folders, files){
            folders.forEach(folder => {
                if(folder != ''){
                    files.forEach(file => {
                        if(file.indexOf(folder) != -1){
                            const array = [folder, file.split(folder+'/').join('').split('.vue').join(''), 1]
                            this.data.push(array)
                            //this.data.push(folder, file.split(folder+'/').join('').split('.vue').join(''), '1')
                        }
                    })
                }
            })
        },
        //페이지 이동
        movePage(event){
            if (event.point.formatPrefix == 'point') {
                // 노드의 ID 또는 다른 식별자를 사용하여 원하는 작업 수행
                this.$router.push('/'+ event.point.from + '/' + event.point.to);
            }
        }
    }
}
</script>

결과💯

pages 내부 파일

화면 결과