Оригинальная статья была написана в Бахасе можно прочитать здесь Отказ
Создавая веб-сайт, цель вашего сайта посещает пользователь/клиент, верно? Существуют различные способы для сайтов, которые можно посетить. Да, один из них использует SEO Technique, вот как сделать ваш сайт легко найти только через поисковые системы, такие как Google, Bing, или Duckduckgo.
Все будет хорошо, пока вы не поймете, что ваш сайт построен с использованием полного JavaScript, и большая часть содержимого генерируется JavaScript. Но успокойся, поисковая система, такая как Google, теперь более продвигается в чтении JavaScript Tho. С мая 2019 года Google больше использует вечнозеленую больше об этом можно прочитать здесь , они утверждают, что последнее вечнозеленое бот Google может быть более надежным в рендеринге содержимого JavaScript, новейшая GoogleBot теперь использует Chrome Version 74, которая имеет те же возможности, что и ваш Chrome Browser в рендерингах JavaScript.
Да, это Google, то что, если вы поделитесь своим сайтом в социальных сетях? А как насчет сканеров Facebook или Crawlers Twitter?
Если вы знаете, это не только Google, Bing, или Duckduckgo, у которого гусеничный, социальные сети, такие как Facebook, и Twitter, и Twitter, также имеют Crawlers, которые предназначены для получения мета и отображать ее в объекте с веб-сайта, который передается в социальных сетях.
Как это сделать?
Facebook и Twitter имеют свои метки, так что их бот может обнаруживать и создавать объекты данных для отображения, как показано выше.
Но, когда ваш сайт – это Приложение одно страницы Затем вам нужно подготовиться, когда Facebook или Twitter Bot и не может прочитать метаги или содержимое на вашем сайте. Основываясь на моем эксперименте, я сделал это, когда эта статья была написана в мае 2020 мая, бот Facebook не способен читать SPA или веб-сайты, которые его содержимое генерируется JavaScript. Жалкий.
Тогда как?
Динамический рендеринга может быть вашим лучшим другом, хотя есть и другие способы, как преобразовывать свой сайт на статический сайт.
Хорошо, скажем, вы хотите только SPA, и все, что нам нужно сделать, это динамический рендеринг.
Так что такое динамический рендеринг?
Если мы посмотрим на его имя «динамика», не забудьте, если вы используете динамический рендеринг Тогда вам нужен сервер, в моем случае я использую сервер NODEJS. С динамическими рендерингами веб-страницы, которые будут доставлены сервером, отличается в зависимости от обнаруженных пользовательский агент Отказ Если его обнаруженный пользовательский агент представляет собой бот, веб-страница, которая будет доставлена клиенту, является статическим сгенерированным запрошенной страницей, поскольку перед отправкой клиенту CuppeteTeer обработает веб-страницу и сначала визуализация. Но если обнаруженный пользователь является настоящим человеком, то страница, которая будет отправлена клиенту, является HTML, JS и CSS и будет отображаться прямо в браузере пользователя.
Как мы можем реализовать это?
Сначала вам нужен сервер, который может поддерживать Nodejs, если у вас нет его, вы можете использовать Heroku.
Простой способ создать вашу папку Project, затем сделать NPM init Отказ
Затем установите несколько пакетов, как показано ниже:
Expressjs: Установка NPM выражать
Кукла: NPM Установите кукур
UserAgent: NPM установить USERAGENT
После того, как все три пакета установлены, вам нужно будет создать файл index.js в качестве точки входа на вашей стороне сервера.
//index.js
const express = require('express');
const puppeteer = require('puppeteer');
const ua = require('useragent');
const app = express();
var path = require("path");
const directory = 'dist';
const dist = path.join(__dirname, directory)
const port = process.env.PORT || 3000;
//you can put your puppeteer middleware here later
app.use('*', (req, res) => {
res.sendFile(path.join(dist, 'index.html'));
})
app.listen(port, () => {
console.log(`Web server is running at port ${port}`);
});
Добавьте этот код на промежуточное программное обеспечение для обнаружения пользователя.
function isBot (useragent) {
const agent = ua.is(useragent);
return !agent.webkit && !agent.opera && !agent.ie &&
!agent.chrome && !agent.safari && !agent.mobile_safari &&
!agent.firefox && !agent.mozilla && !agent.android;
}
const uAgentMiddleware = async (req, res, next) => {
const local_url = 'YOUR_BASE_URL'
if (!isBot(req.headers['user-agent'])) {
next ()
} else {
try {
const browser = await puppeteer.launch({
'args' : [
'--no-sandbox',
'--disable-setuid-sandbox'
]
})
const page = await browser.newPage();
await page.setUserAgent('Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36');
await page.goto(local_url, {
waitUntil: "networkidle0",
});
const html = await page.evaluate(() => {
return document.documentElement.innerHTML;
});
await browser.close();
res.send(html);
} catch (err) {
res.send(err)
}
}
}
app.use(uAgentMiddleware)
После добавления выше кода, то убедитесь, что вы скопировали свой Dist папка или папка Vuue Build (в этом случае я использую Vuejs) к той же папке, что и index.js. .
Наконец в package.json Добавьте скрипт, как следующее, чтобы запустить index.js Отказ
Тогда просто бегите с NPM запустить начало Чтобы запустить сервер.
//package.json
//....
"scripts": {
"start": "node index.js"
},
//...
Оригинал: “https://dev.to/burhanahmeed/dynamic-rendering-simple-solution-for-spa-when-shared-on-social-media-amd”