Чланци са ознаком #SSR

Подршка за чланке

Категорије:
  • ажурирања сајта

Данас сам довршио додавање почетног система за приказивање чланака у Markdown-у. За разлику од тога како сам (за сада) реализовао приказивање чланака овог блога, у страницама из одељка „Текстови“ нисам користио frontmatter-markdown-loader. Разлог за ово је што је тај пакет за Nuxt прилагођен ситуацији у којој се серверски део апликације заиста извршава на Node.js серверу и само шаље донекле или делимично обрађен садржај клијентском делу. Уколико хостујемо сајт на статичком серверу, каква је већина (јефтиних) хостинг понуда код домаћих провајдера, користићемо SSG, тј. статички генерисан сајт. Ово не оставља места за додавање и уређивање чланака „у лету“, преко интерфејса саме апликације, па сам одлучио да директно искористим markdown-it.

Пре свега, направио сам фајл markdown-it.js са следећим садржајем:

import markdownIt from 'markdown-it';
import markdownItAbbr from 'markdown-it-abbr';
//...

var md = new markdownIt({html: true})
    .use(markdownItAbbr)
    //...
    ;

//...

export { md };

а затим и фајл plugins/markdown-it.js:

import { md } from '../markdown-it';

export default({ app }, inject) =>
{
    inject('mdRender', markdown => md.render(markdown));
};

Тиме се функција render() убацује у Nuxt-ов context и Vue инстанцу, па може да јој се приступи преко context.app.$mdRender() или this.$mdRender(). Сада једноставно могу да у оквиру компоненте странице напишем:

<template lang="pug">
    static-markdown(:markdown="markdown")
</template>

<script>
import StaticMarkdown from '~/components/StaticMarkdown';
export default {
    name: 'Koord',
    components: { StaticMarkdown },
    data()
    {
        return {
            markdown: '',
        };
    },
    async asyncData({ store, app })
    {
        let linkId = 'koord';
        await store.dispatch('articles/loadArticle', { linkId },
                             { root: true });
        let article = store.getters['articles/article'];
        return {
            markdown: article && article.markdown
                ? app.$mdRender(article.markdown)
                : ''
        };
    }
};
</script>

и Markdown ће бити преведен у HTML, у време генерисања страница, што омогућава видљивост претраживачима. Истовремено, постоји могућност накнадне хидрације подацима из базе. Планирам да овакву комбинацију евентуално применим и на чланке овог блога.

Динамичке руте у статичкој апликацији

Категорије:
  • Програмирање

Наставивши развој сајта, приметио сам једну специфичност Nuxt.js-а. Уколико статички генеришете апликацију преко nuxt generate, а не наведете експлицитно које руте ће бити генерисане, руте са параметрима ће и даље функционисати, али само ако су активиране кроз саму апликацију, преко Vue Router-а (рецимо, <nuxt-link>). Ако унесете УРЛ странице у адресном пољу, или притиснете F5, добићете поруку о грешци, као да рута не постоји!

Проблем

На пример, нека у апликацији имамо следеће странице:

/pages
 ├──/search
 │   └──_docid.vue
 └──index.vue

Нека одговарајући фајлови садрже следећи код:

Покретањем nuxt generate без посебно подешене generate секције фајла nuxt.config.js биће генерисана само основна рута, /. Ако приступимо почетној страници, па затим активирамо линк Search: "first", учитаће се страница за претрагу, /search/first. Међутим, притиском на F5 или Ctrl+R страница неће бити исправно учитана. Исто се дешава приступом преко линка /search/first.

Са овим понашањем Nuxt.js-а сам се суочио када сам желео да у мој блог додам подршку за листање свих страница са одређеном ознаком. Рецимо, у мом блогу се за то користи рута /blog/tag/:tagname, и овај чланак ће се појавити у листи чланака на рути /blog/tag/SSR.

Ако негде у апликацији, рецимо у приказу појединачних чланака, позовемо

<nuxt-link :to="`/blog/tag/${tag.name}`">
    {{tag.name}}
</nuxt-link>

све ће функционисати, али не и у поменута два случаја: ако директно посетимо УРЛ или освежимо већ учитану страницу.

Решење

Решење овог проблема је генерисање странице која ће бити „резервна опција“ у случају када задата рута није статички генерисана. Ово се постиже додавањем опције fallback у секцију generate у датотеци nuxt.config.js:

Ова опција има три могуће вредности:

  • true: fallback руту ће опслуживати фајл /404.html,
  • false: fallback руту ће опслуживати фајл /200.html,
  • '[назив_фајла].html': експлицитно задавање фајла fallback руте.

Ова лако занемарљива опција може представљати разлику између функционалног и нефункционалног сајта.

Creative Commons License
Copyright © 1999-
Страхиња Радић (Strahinya Radich)