рю рендеринг на стороне сервера и заполнение данных - PullRequest
Новая
       18

рю рендеринг на стороне сервера и заполнение данных

0 голосов
/ 23 октября 2018

В настоящее время я занимаюсь рефакторингом приложения и преобразовываю весь свой базовый код в vue.Одним из моих требований является выполнение рендеринга на стороне сервера.

Я следовал примеру vue ssr вместе с примером хакерских новостей, чтобы помочь мне понять ssr.

У меня, однако, есть вопрос, по которому яНе могу найти хорошего ответа, и перед дальнейшим развитием я хочу убедиться, что мы поступаем правильно.

Я хочу знать, является ли хорошей практикой иметь какие-то действия в хранилище vue, вызывающем API длярендеринг на стороне сервера.

Все примеры, которые я нашел, имеют дело с реальной внешней конечной точкой, которую они подключают и выполняют запрос.Но это не та установка, которая у нас есть.

У нас есть «обычное» экспресс-приложение с собственными конечными точками;так, например, экспресс-маршрутизатор выглядит примерно так: 

// This is our post model, it lives on the same app, so its not a external API
app.get('/posts', (req, res) => Posts.getPosts());

// Resolve request for SSR rendering, pretty much the same as in [vue ssr example](https://ssr.vuejs.org/guide/routing.html#routing-with-vue-router)
app.get(
  const context = { url: req.url }

  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found')
        } else {
          res.status(500).end('Internal Server Error')
        }
      } else {
        res.end(html)
      }
    })
  })
);

Эта часть отлично работает как на клиенте, так и на сервере.Если вы запрашиваете что-то для / posts, вы получаете ответ.

Чтобы иметь более модульный код, мы используем хранилища vuex;будучи одним из действий, называемых fetchPosts, и это действие отвечает за выборку текущих сообщений в представлении. 

...
actions: {
  fetchPosts({ commit }) {
    return $axios.get('/posts').then((response) => {
      commit('setPosts', {
        posts: response.data
      });
    });
  }
},
...

Я считаю, что для клиентской стороны это хорошо, но при рендеринге на сервере это, вероятно,не оптимально.

Причина заключается в том, что axios выполняет фактический http-запрос, который также должен реализовать механизм аутентификации, и, в общем, очень плохую производительность.

Мой вопрос: это рекомендуемый и стандартный способВы делаете это?

Какие еще возможности работают на сервере и клиенте?

Люди действительно создают отдельные приложения для API и приложений рендеринга?

Спасибо!

1 Ответ

0 голосов
/ 05 мая 2019

Я знаю, что это старый вопрос, но для будущих посетителей:

Рекомендуется использовать псевдонимы модуля webpack для загрузки api на стороне сервера для сервера и api на стороне клиента для браузера.Вы должны использовать одну и ту же сигнатуру вызова, которая позволяет «обменивать» API.Это, конечно, значительно повышает производительность, так как API на стороне сервера может выполнять прямые запросы к БД, вместо того, чтобы извлекать данные через http.

По сути, ваш webpack.server.config.js должен иметь: 

resolve: {
    alias: {
      'create-api': './create-api-server.js'
    }
   }

В вашем webpack.client.config.js: 

resolve: {
    alias: {
      'create-api': './create-api-client.js'
    }
  }

Импорт create-api теперь будет загружать необходимые API.

Посмотрите на https://github.com/vuejs/vue-hackernews-2.0, чтобы увидеть полныйпример.

...