Me gustaría obtener datos siempre del lado del servidor (para evitar que se puedan leer desde la pestaña de red)
Cuando la página se actualiza (o se carga por primera vez), process.server devuelve true y no se puede ver nada en la pestaña de red.
async asyncData({ params, $axios }) { console.log(process.server) const { id } = params; const url = `api/post/${params.id}` const post = await $axios.$get(url); return { post }; } Sin embargo, cuando traté de navegar a través de un enlace interno usando el enlace del router-link nuxt-link siempre terminé con la búsqueda del lado del cliente. process.server devuelve false y la solicitud/respuesta se puede ver en la pestaña de red.
La única solución que se me ocurrió usando <a> en lugar de enlaces internos, gracias a que esta página se carga y podemos buscar en el lado del servidor.
Los documentos de Nuxt dicen que siempre use nuxt-link en lugar de <a> para los enlaces internos, pero <a> se puede usar para los enlaces externos. Así que me preguntaba cuál es la(s) desventaja(s) si usamos para enlaces internos (solo para actualizar la página y asegurarnos de buscar en el lado del servidor)
¿O hay alguna forma mejor de obtener siempre el lado del servidor cuando navegamos?
Así es como lo manejo y uso nuxt-link en todo momento.
Use el gancho de fetch y luego se llama en ambos.
async fetch() { this.getItems() }, Además, si lo desea, puede llamar directamente al código del servidor a través this.$root.context.ssrContext , que sería lo mismo que haría si usara nuxtServerInit en las tiendas.
async fetch() { if (process.server) { let items = [] if (this.isset(this.$root, 'context.ssrContext.req.thingsModel')) { items = this.$root.context.ssrContext.req.cache.get('things', []) if (!items.length) { items = await this.$root.context.ssrContext.req.thingsModel.get( this.limit ) items = this.$copy(items) this.$root.context.ssrContext.req.cache.put('things', items, 60000 * 60) } } this.items = items } else { this.getItems() // would be an ajax call to populate items } },