V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
webhub123
V2EX  ›  程序员

网站怎么改成 SSR 以便优化 SEO

  •  
  •   webhub123 · 34 天前 · 1438 次点击
    这是一个创建于 34 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前做了个资源分享网站 https://www.webhub123.com/#/home/more 但是用的是 Quasar 2.x(Vue3) SPA 模式 + ElementUI 开发的,导致爬虫在网站上爬取不到任何内容,SEO 关键词直达完全为 0 。纯靠个人硬推,流量上不来,有没有 Quasar SSR 的大佬支个招。

    pAp2gCd.jpg

    11 条回复    2024-08-14 13:20:59 +08:00
    webhub123
        2
    webhub123  
    OP
       34 天前
    @houyaodong666 这个是一开始就要选这个 SSR 模式,我代码在 SPA 模式开发的,换成 SSR 的话,很多地方都要重写,非常麻烦。想知道有没有简单点的方式
    webhub123
        4
    webhub123  
    OP
       34 天前
    @fescover 这个看着可行,试试,多谢!
    partner666
        5
    partner666  
       34 天前
    nuxt ?
    ChinaDolphin
        6
    ChinaDolphin  
       34 天前
    直接重构 Nuxt3 Seo 效果杠杠的
    wlf2mydream
        7
    wlf2mydream  
       34 天前
    如果完整迁移不现实,可以考虑逐步迁移的策略:

    逐步迁移:先将部分页面或模块迁移到 SSR ,逐步适应和重构。例如,可以先迁移主页或一些核心页面,保留其他页面作为 SPA 。
    组件级 SSR:对于某些关键组件,可以使用 SSR 来增强性能和 SEO ,而其他组件继续在客户端渲染。
    yrj
        8
    yrj  
       34 天前
    建议一步到位,直接 astro 走起:)
    webhub123
        9
    webhub123  
    OP
       33 天前
    @ChinaDolphin 我之前用的 Quasar 写的,很多组件都是用这个框架提供的,用 Nuxt 重构的话会比较麻烦,估计大部分都要重写。这里贴一下 reddits 上一个人关于这两个框架的对比


    Quasar
    优点
    - 在 Quasar 中,很多东西都很容易上手和运行。项目脚手架、字体、图标、响应式设计、原子 css 类、PWA 、托管......一切都有很好的文档说明。CLI 简单实用。

    - **组件库**可用的组件非常强大,可以处理大量用例。此外,像吐司、对话框和底层表都是内置的。

    - **性能**。我创建的应用程序非常复杂。我简直不敢相信它的性能有多好。我使用了 Quasar 提供的几乎所有组件,唯一遇到的性能问题都是我自己的错。

    **缺点**

    -可用模板不多。您需要从头开始设计您的应用程序或网站。

    - 样式略显过时(但组件样式有大量可定制的选项)。

    - 不支持 tailwind CSS 。Quasar CSS 样式与 tailwind 不兼容,因此导入 tailwind 组件或布局需要花点功夫。不过 ChatGPT 能很好地将 tailwind CSS 类转换为 Quasar CSS 类。

    - 新功能。Quasar 已经非常成熟,我甚至不知道现在还能期待他们添加什么功能,但开发速度很慢。路线图上的大功能很少。

    Nuxt

    **优点**

    - 加载方便, 它们使 SFC 更为整洁。
    - Nuxtr 开发工具与 vscode 集成得很好。你可以非常轻松地创建组件、页面和工具
    - NuxtUI 拥有漂亮的现代风格
    - 与 tailwindCSS 兼容。我从 tailwindUI 中提取了一个模板,一天之内就完成了一个现代的、完全响应式的设计。无头组件运行得非常好,我可以在需要的地方替换 NuxtUI 组件。

    - 新功能。Nuxt 总是有新的模块和功能问世。他们创建了一个非常令人兴奋的生态系统

    **缺点**

    - 没有模块能真正开箱即用。你必须深入了解每个模块的文档,才能知道它们为什么会崩溃。导入 tailwind 会破坏一切( Tailwind 包含在 NuxtUI 中)。导入 Ionic 会破坏一切(如果只想要电容器,就必须禁用大量内置的 css 类)。自动导入对 vitest 无效。anime.js 使用了奇怪的$anime ,这与他们的文档截然不同。基本上,所有事情都很难。有些时候,我浪费在 Nuxt 配置上的时间比开发时间还多。

    - 大多数模块都需要在 nuxt.config.ts 中自定义。这一点略有不同,以至于从非 Nuxt 项目中复制配置示例变得很有挑战性。例如:是将 eslint 设置放在 nuxt.config.ts 中还是 .eslintrc 中?
    webhub123
        10
    webhub123  
    OP
       33 天前
    @wlf2mydream 你这个建议非常具有实操性,感谢!
    nodesolar
        11
    nodesolar  
       33 天前
    不是前端, 简单学了哈 react+mantine+nextjs 做 SSR 个人感觉挺好的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1000 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:15 · PVG 03:15 · LAX 12:15 · JFK 15:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.